chart.js轻量级图表插件使用
2021-01-16 08:14
标签：idt style text ext linechart var pat ntb arc 项目中引入Chart.js 1.创建html标签 2.创建一个chart类的实例 chart.js轻量级图表插件使用 标签：idt style text ext linechart var pat ntb arc 原文地址：https://www.cnblogs.com/life-fxl/p/13378486.htmlvar lineChartData = {
//X坐标数据
labels: ["周一", "周二", "周三", "周四", "周五", "周六", "周末"],
datasets: [{
//统计表的背景颜色
fillColor: "rgba(0,0,255,0)",
//统计表画笔颜色
strokeColor: "#f60",
//点的颜色
pointColor: "#000;",
//点边框的颜色
pointStrokeColor: "red",
//鼠标触发时点的颜色
pointHighlightFill: "red",
//鼠标触发时点边框的颜色
pointHighlightStroke: "#000",
//Y坐标数据
data: [300, 555, 655, 714, 899, 905, 1000]
}, {
fillColor: "rgba(0,255,0,0)",
strokeColor: "rgba(92, 184, 92, 1)",
pointColor: "rgba(23, 126, 23, 1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [314, 455, 755, 814, 999, 905, 1000]
}, {
fillColor: "rgba(255,0,0,0)",
strokeColor: "blue",
pointColor: "rgba(23, 126, 23, 1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [114, 255, 455, 414, 599, 605, 500]
}]
}
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData, {
responsive: true
});
}