使用chart.js画简单的线性图

arsenalzjx

于 2018-09-04 11:35:21 发布

阅读量2k

点赞数 1

分类专栏：前端 js组件文章标签：前端 js组件 chart.js 线形图统计图表

本文链接：https://blog.csdn.net/arsenalzjx/article/details/82379029

版权

本文介绍了如何使用Chart.js库创建线性图。首先提供了Chart.js的官方下载地址和推荐版本，接着展示了线性图的效果，并给出了HTML中引入Chart.js的代码示例，最后演示了通过AJAX获取后台数据并动态绘制图表的方法。

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

官方下载地址:https://github.com/chartjs/Chart.js

这里 releases选择了Chart.js-2.7.1

看看效果,(色彩搭配上是为了配合注释讲解参数,觉得不好看可以自行更改)

开始撸代码

html引入

<head>
    <script src=/asserts/jquery.3.3.1/jquery-3.3.1.js"></script>
    <script src=/asserts/Chart.js-2.7.1/Chart.bundle.js"></script>
</head>
<body>
<canvas id="canvas"></canvas>
</body>

静态js代码

<footer>
    <script>
        var testData = {
            "type": "line&#

最低0.47元/天解锁文章