我有一个CanvasJS图表,我想动态设置它的stripLine。
chart = new CanvasJS.Chart("chart",
{
backgroundColor: "rgba(0,0,0,0)",
legend: {
fontColor: "#FFF"
},
axisX: [{
title: "Test axisX title",
stripLines: [
{
value: 250,
color: "#FF0000"
}
],
}],
data: [] //Later add datapoints
});
设置stripLine位置的函数:
var setVerticalLine = function (xPos) {
if (typeof chart !== 'undefined') {
console.log(JSON.stringify(chart)); //debug info
console.log("chart.axisX type: " + typeof chart.axisX); //debug info
chart.axisX[0].stripLines[0].set("value", xPos);
}};
渲染后我调用该函数,但该集不成功。 错误:
未捕获的TypeError:无法读取未定义的属性“0”...“ 调试信息:“chart.axisX type:undefined”。转储的图表对象包含axisX:“...”axisX“:[{”title“:”Test axisX title“,”stripLines“:[{”value“:250,”color“:”#FF0000“}] }] ...
当我在渲染图表上看到它与标题和带状线时,qzxswpoi怎么可能是axisX?为什么我无法访问并修改?有人可以帮我解决这个问题吗?
根据undefined
,'图表应该在你使用set方法之前呈现'。在调用setVerticalLine之前渲染图表应该可以正常工作。
这是工作代码:
documentation
var chart = new CanvasJS.Chart("chart", {
backgroundColor: "rgba(0,0,0,0)",
legend: {
fontColor: "#FFF"
},
axisX: [{
title: "Test axisX title",
stripLines: [
{
value: 250,
color: "#FF0000"
}
],
}],
data: [] //Later add datapoints
});
chart.options.data.push({type: "line", dataPoints: [{x: 200, y: 100}, {x: 300, y: 50}]}); //Dummy datapoints
chart.render();// Render Chart before using set method
var setVerticalLine = function (xPos) {
if (typeof chart !== 'undefined') {
chart.axisX[0].stripLines[0].set("value", xPos);
}
};
setVerticalLine(220); //Update Stripline value to 220
你没有在转储对象上看到<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chart" style="height: 260px; width: 100%;"></div>
。你看到的实际上是chart.axisX
。此外,chart.themeOptions.axisX
不是一个函数(虽然chart.themeOptions.axisX.set
是)。