canvasJS 图表无法正确呈现
canvasJS chart not rendering properly
我正在尝试使用 canvasJS
render
多折线图,但它没有按预期工作。
这是我的 drawChart 函数
function drawChart(obj, placeholder){
var dataPoints = [];
var maxPrice = [];
var minPrice = [];
//console.info(obj);
for (var i = obj.length - 1; i >= 0; i--) {
dataPoints.push({label:obj[i].year+"-"+obj[i].month+"-"+obj[i].day,y:Math.round(obj[i].avgPrice * 1000) / 1000});
minPrice.push({label:obj[i].year+"-"+obj[i].month+"-"+obj[i].day,y:obj[i].minPrice});
maxPrice.push({label:obj[i].year+"-"+obj[i].month+"-"+obj[i].day,y:obj[i].maxPrice});
}
console.log(dataPoints);
console.log(maxPrice);
console.log(minPrice);
var chart = new CanvasJS.Chart("chartContainer",
{
animationEnabled: true,
//theme: "theme1",
zoomEnabled: true,
title:{
text: placeholder
},
data: [
{
type: "spline", //change type to bar, line, area, pie, etc
showInLegend: true,
legendText: "Average Price",
dataPoints: dataPoints //this line I tried to change
},
{
type: "spline",
showInLegend: true,
legendText: "Min Price",
dataPoints: minPrice
},
{
type: "spline",
showInLegend: true,
legendText: "Max Price",
dataPoints: maxPrice
}
],
legend: {
cursor: "pointer",
itemclick: function (e) {
if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
} else {
e.dataSeries.visible = true;
}
chart.render();
}
}
});
chart.render();
}
var dataPoints, maxPrice, minPrice
具有相同的 layout/data.
看这里
它显示的图表是这样的,两条线的重置minPrice and maxPrice
消失了。
PS 如果我将 dataPoints: dataPoints
更改为 dataPoints: min/maxPrice
它也不起作用。
我找到了解决方案,我将其发布,希望对其他人有所帮助。
我怀疑如果您尝试动态呈现图表,那么对于 y-axis
您需要使用 Math
函数来使其工作。
所以我改变了这些
dataPoints.push({label:obj[i].year+"-"+obj[i].month+"-"+obj[i].day,y:Math.round(obj[i].avgPrice * 1000) / 1000});
minPrice.push({label:obj[i].year+"-"+obj[i].month+"-"+obj[i].day,y:obj[i].minPrice});
maxPrice.push({label:obj[i].year+"-"+obj[i].month+"-"+obj[i].day,y:obj[i].maxPrice});
到
dataPoints.push({label:obj[i].year+"-"+obj[i].month+"-"+obj[i].day,y:Math.round(obj[i].avgPrice * 1000) / 1000});
minPrice.push({label:obj[i].year+"-"+obj[i].month+"-"+obj[i].day,y:Math.round(obj[i].minPrice * 1000) / 1000});
maxPrice.push({label:obj[i].year+"-"+obj[i].month+"-"+obj[i].day,y:Math.round(obj[i].maxPrice * 1000) / 1000});
现在它工作正常,这可能是 canvasjs
中的一个错误,或者可能是我在某个地方搞砸了。
看这里
我正在尝试使用 canvasJS
render
多折线图,但它没有按预期工作。
这是我的 drawChart 函数
function drawChart(obj, placeholder){
var dataPoints = [];
var maxPrice = [];
var minPrice = [];
//console.info(obj);
for (var i = obj.length - 1; i >= 0; i--) {
dataPoints.push({label:obj[i].year+"-"+obj[i].month+"-"+obj[i].day,y:Math.round(obj[i].avgPrice * 1000) / 1000});
minPrice.push({label:obj[i].year+"-"+obj[i].month+"-"+obj[i].day,y:obj[i].minPrice});
maxPrice.push({label:obj[i].year+"-"+obj[i].month+"-"+obj[i].day,y:obj[i].maxPrice});
}
console.log(dataPoints);
console.log(maxPrice);
console.log(minPrice);
var chart = new CanvasJS.Chart("chartContainer",
{
animationEnabled: true,
//theme: "theme1",
zoomEnabled: true,
title:{
text: placeholder
},
data: [
{
type: "spline", //change type to bar, line, area, pie, etc
showInLegend: true,
legendText: "Average Price",
dataPoints: dataPoints //this line I tried to change
},
{
type: "spline",
showInLegend: true,
legendText: "Min Price",
dataPoints: minPrice
},
{
type: "spline",
showInLegend: true,
legendText: "Max Price",
dataPoints: maxPrice
}
],
legend: {
cursor: "pointer",
itemclick: function (e) {
if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
} else {
e.dataSeries.visible = true;
}
chart.render();
}
}
});
chart.render();
}
var dataPoints, maxPrice, minPrice
具有相同的 layout/data.
看这里
它显示的图表是这样的,两条线的重置minPrice and maxPrice
消失了。
PS 如果我将 dataPoints: dataPoints
更改为 dataPoints: min/maxPrice
它也不起作用。
我找到了解决方案,我将其发布,希望对其他人有所帮助。
我怀疑如果您尝试动态呈现图表,那么对于 y-axis
您需要使用 Math
函数来使其工作。
所以我改变了这些
dataPoints.push({label:obj[i].year+"-"+obj[i].month+"-"+obj[i].day,y:Math.round(obj[i].avgPrice * 1000) / 1000});
minPrice.push({label:obj[i].year+"-"+obj[i].month+"-"+obj[i].day,y:obj[i].minPrice});
maxPrice.push({label:obj[i].year+"-"+obj[i].month+"-"+obj[i].day,y:obj[i].maxPrice});
到
dataPoints.push({label:obj[i].year+"-"+obj[i].month+"-"+obj[i].day,y:Math.round(obj[i].avgPrice * 1000) / 1000});
minPrice.push({label:obj[i].year+"-"+obj[i].month+"-"+obj[i].day,y:Math.round(obj[i].minPrice * 1000) / 1000});
maxPrice.push({label:obj[i].year+"-"+obj[i].month+"-"+obj[i].day,y:Math.round(obj[i].maxPrice * 1000) / 1000});
现在它工作正常,这可能是 canvasjs
中的一个错误,或者可能是我在某个地方搞砸了。
看这里