我用chart.js构建了折线图。但是该图表未显示。这是我的HTML
<canvas id="myChart" width"600" height:"600"></canvas>
这是我的JavaScript。我没有这种方法的错误,但没有任何显示。
var c = $('#myChart');
var ct = c.get(0).getContext('2d');
var ctx = document.getElementById("myChart").getContext("2d").Line(data);
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July","August", "November", "December"],
datasets: [
{
label: "Sodium intake",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [165, 159, 180, 181, 156, 155, 140]
},
{
label: "Sugar intake",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [128, 148, 140, 119, 186, 127, 190]
}
]
};
我使用的另一种方法类似于文档。我实例化了一个新图表。但是,此方法为我的折线图返回未定义。
var ctx = document.getElementById("myChart").getContext("2d");
var myLineChart = new Chart(ctx).line(data,{
belzierCurve : false
});
在您的html上:
<canvas id="myChart" width"600" height:"600"></canvas>
它应该是:
<canvas id="myChart" width="600" height="600"></canvas>
然后,替换您的代码
var c = $('#myChart');
var ct = c.get(0).getContext('2d');
var ctx = document.getElementById("myChart").getContext("2d").Line(data);
有了这个代码
var ctx = new Chart(document.getElementById("myChart").getContext("2d")).Line(data);
所以在你的js里
var data = {
//your data here
}
enter code here
然后在数据之后添加此行
var ctx = new Chart(document.getElementById("myChart").getContext("2d")).Line(data);
因此,您的代码如下所示:
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July","August", "November", "December"],
datasets: [
{
label: "Sodium intake",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [165, 159, 180, 181, 156, 155, 140]
},
{
label: "Sugar intake",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [128, 148, 140, 119, 186, 127, 190]
}
]
}
var ctx = new Chart(document.getElementById("myChart").getContext("2d")).Line(data);
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句