Chart.js-无法读取属性 [英] Chart.js - cannot read property
问题描述
我想使用Django和ChartJS创建包含多条线(多个数据集)的图表.
I want to create a chart with multiple lines (multiple datasets) using Django and ChartJS.
我正在将数据添加到data属性中，每行用短划线(-)分隔，每个值用逗号(，)分隔.然后，JS将其拆分并用于绘制图表.
I'm adding a data into the data attribute, separated by dash (-) for each line and by comma (,) for every value. Then the JS splits it and use to draw a chart.
<canvas id="product-linechart" data-labels="" data-charts="95.0,98.0,158.0,160.0,191.0,106.0,51.0,158.0,89.0,154.0-89.0,104.0,62.0,190.0,172.0,109.0,183.0,88.0,89.0,106.0-133.0,173.0,102.0,151.0,119.0,172.0,139.0,177.0,174.0,141.0-72.0,108.0,175.0,81.0,123.0,188.0,52.0,196.0,199.0,117.0-174.0,154.0,180.0,87.0,193.0,105.0,106.0,115.0,185.0,159.0-83.0,111.0,185.0,199.0,133.0,142.0,61.0,74.0,168.0,128.0-77.0,120.0,116.0,60.0,179.0,162.0,151.0,123.0,138.0,109.0-156.0,69.0,126.0,67.0,97.0,193.0,96.0,64.0,117.0,190.0-93.0,71.0,59.0,101.0,86.0,139.0,110.0,75.0,183.0,156.0" data-data_list="" width="1648" height="447" style="width: 1465px; height: 398px;" class=""></canvas>
问题在于它会引发错误:
The problem is that it raises errors:
Uncaught TypeError: Cannot read property '0' of undefined(…)(anonymous function) @ chart.js:11s.each @ chart.js:10(anonymous function) @ chart.js:11s.each @ chart.js:10initialize @ chart.js:11e.Type @ chart.js:10s @ chart.js:10e.(anonymous function) @ chart.js:10(anonymous function) @ (index):118l @ jquery.min.js:2fireWith @ jquery.min.js:2ready @ jquery.min.js:2A @ jquery.min.js:2
JS:
<script type="text/javascript">
$(function () {
"use strict";
var charts = $('#product-linechart').attr('data-charts').split('-');
var datasets = [];
charts.forEach(function (chart) {
datasets.push({
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: chart.split('.')
})
});
var data = {
datasets: datasets
};
new Chart(document.getElementById("product-linechart").getContext("2d")).Line(data, {
responsive: true,
maintainAspectRatio: false
});
});
你知道出什么问题吗?
设置标签时，会发生新错误:
When I set labels, new error occures:
(index):117 Uncaught SyntaxError: Unexpected identifier
26115.jpg:1 GET http://127.0.0.1:8000/dashboard/static/dashboard/img/26115.jpg 404 (Not Found)
avatar.png:1 GET http://127.0.0.1:8000/dashboard/static/dashboard/img/avatar.png 404 (Not Found)
(index):3949 Uncaught TypeError: Cannot read property 'getContext' of null
at HTMLDocument.<anonymous> (http://127.0.0.1:8000/dashboard/products/view/28/:3949:55)
at l (http://127.0.0.1:8000/static/dashboard/js/jquery.min.js:2:16996)
at Object.fireWith [as resolveWith] (http://127.0.0.1:8000/static/dashboard/js/jquery.min.js:2:17781)
at Function.ready (http://127.0.0.1:8000/static/dashboard/js/jquery.min.js:2:12504)
at HTMLDocument.A (http://127.0.0.1:8000/static/dashboard/js/jquery.min.js:2:9909)(anonymous function) @ (index):3949l @ jquery.min.js:2fireWith @ jquery.min.js:2ready @ jquery.min.js:2A @ jquery.min.js:2
推荐答案
因为您没有在dataset提供给Chart API的lables.因此，当ChartJS尝试呈现图表时，它会先绘制标签，然后再在图表上绘制每个数据.
Because you haven't had lables in dataset provide to Chart API. So when ChartJS trying to render a chart it looks for labels before plotting each data on the graph.
var data = {
datasets: datasets,
labels : ["10","20","30","40","50","60","70","80","90","100"] //<-- added labels
};
new Chart(document.getElementById("product-linechart").getContext("2d")).Line(data, {
responsive: true,
maintainAspectRatio: false
});
这篇关于Chart.js-无法读取属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
