利用chartjs生成图表

最新推荐文章于 2025-03-20 15:19:16 发布

流星球

最新推荐文章于 2025-03-20 15:19:16 发布

阅读量2.6k

点赞数 1

分类专栏： HTML 文章标签： chart.js 生成图表

本文链接：https://blog.youkuaiyun.com/u010008539/article/details/50279857

版权

HTML 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何利用Chart.js库轻松地在HTML中创建图表，只需简单引用并配置JS即可实现。后续会进一步探讨更多图表格式的使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

说明

下面是如何利用chartjs生成图表，引用好Chart.js之后我们就可以直接使用了。很方便就可以生成了。还有很多其他格式，以后会再详细介绍如何使用。

html

<canvas id="canvas" height="400" width="500"></canvas>

JS

var json = [
{"company_name":"project A",
"present_worth":"81531.946062978"},
{"company_name":"projectB","present_worth":"67313.916593765"},{"company_name":"project c","present_worth":"92440.723376746"}];

var chartjsData = [];
for (var i = 0; i < json.length; i++) {
    chartjsData.push(json[i].present_worth);  
}
var chartjslabel = [];
for (var i = 0; i < json.length; i++) {
    chartjslabel.push(json[i].company_name);  
}


var barChartData = {
            labels :chartjslabel,
            datasets : [
                {
                    fillColor : "rgba(220,280,220,0.5)",
                    strokeColor : "rgba(220,220,220,1)",
                    data : chartjsData

                }
            ]
        };
var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Bar(barChartData);

效果如下图

这里写图片描述