我正在尝试使用render canvasJS折线图,但是它没有按预期工作。

这是我的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具有相同的布局/数据。

看这里。javascript - canvasJS图表无法正确呈现-LMLPHP

它显示这样的图表,两行minPrice and maxPrice的重置消失了。

javascript - canvasJS图表无法正确呈现-LMLPHP

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中的错误,还是我在某个地方弄乱了。

看这里javascript - canvasJS图表无法正确呈现-LMLPHP

09-11 19:38