我正在尝试使用ChartJS在我的Meteor应用程序中创建图表。但是看起来我的JavaScript没有读取canvas元素。
从研究到其他答案,原因是因为在创建HMTL画布元素之前正在读取JS,从而产生空值。
但是我已经放置了JS来在我的meteor应用程序的onRendered部分创建图表,应该解决它。
如果我将JS放在我的HTML中canvas元素后面的脚本标记中,则会生成图表。
是否有解决方案可以将JS代码保存在我的JS文件中,而不是将所有代码都放在脚本标记中?
以下是代码:
JS
var Chart = require('chart.js');
Template.Dashboard_page.onRendered(function dashboardOnRendered() {
var ctx = document.getElementById("myChart").getContext("2d");
// Create gradient
grd = ctx.createLinearGradient(170.000, 600.000, 150.000, 0.000);
// Add colors
grd.addColorStop(0.000, 'rgba(0, 255, 0, 1.000)');
grd.addColorStop(0.200, 'rgba(191, 255, 0, 1.000)');
grd.addColorStop(0.400, 'rgba(221, 255, 0, 1.000)');
grd.addColorStop(0.600, 'rgba(255, 229, 0, 1.000)');
grd.addColorStop(0.800, 'rgba(255, 144, 0, 1.000)');
grd.addColorStop(1.000, 'rgba(255, 50, 0, 1.000)');
var data = {
labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20"],
datasets: [
{
lineTension: 0.1,
backgroundColor: grd,
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [0, 100, 250, 400, 400, 400, 500, 700, 900, 1000, 1000, 1300, 1300, 1100, 900, 700, 500, 300, 100, 0],
spanGaps: false,
}
]
};
var myChart = new Chart(ctx, {
type: 'line',
data: data,
options: {
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
callback: function(value, index, values) {
return value + '°';
},
mirror: true,
},
gridLines: {
display: false,
drawBorder: false,
},
}],
xAxes: [{
display: false,
gridLines: {
display: false
}
}]
},
},
});
});
HTML
<canvas id="myChart" width="400" height="400"></canvas>