CanvasJS（2.3.2版）在第一个数据点和最后一个数据点之间得到一条不需要的线。

问题描述 投票：0回答：1

我找到了一个现有的类似问题，但那里的解决方案不能解决我的问题。 我的数据是按数字排序的，没有空值。

html文件几乎和CanvasJS的line-chart-with-zoom-pan.html一样。 我改变了标题，把我自己的数据点放在里面，而不是使用随机数生成器，并从html文件的同一目录加载canvasjs。

一切都运行得很好，而且很简单! ......除了这额外的一行，它没有在CanvasJS的例子中显示出来。

这是我的html文件。

    <!DOCTYPE HTML>
    <html>
    <head>  
    <meta charset='UTF-8'>
    <script>
    window.onload = function () {
    var chart = new CanvasJS.Chart('chartContainer', {
        animationEnabled: true,
        zoomEnabled: true,
        title:{
            text: 'Problem with Final (Polyline?) Segment from Last Point to Origin' 
        },
        axisY :{
            includeZero:false
        },
        data: data  // initialized below
    });
    chart.render();
    }
    var limit = 6;
    var y = 0;
    var data = [];
    var dataSeries = { type: 'line' };
    var dataPoints = [];
    for (var i = 0; i < limit; i += 1) {
        dataPoints.push({
            x: 3425,
            y: 33.979673769168
        });
        dataPoints.push({
            x: 6850,
            y: 36.27403787497398
        });
        dataPoints.push({
            x: 10275,
            y: 37.742500031440834
        });
        dataPoints.push({
            x: 13700,
            y: 36.02631567584654
        });
        dataPoints.push({
            x: 17125,
            y: 34.75456508773836
        });
        dataPoints.push({
            x: 20550,
            y: 35.236592156677126
        });
    }
    dataSeries.dataPoints = dataPoints;
    data.push(dataSeries);               
    </script>
    <script src='./canvasjs.min.js'></script>
    </head>
    <body>
    <div id='chartContainer' style='height: 370px; max-width: 920px; margin: 0px auto;'>
    </div>
    </body>
    </html>

这是我开始使用的CanvasJS原始文件，它能正常工作。

    <!DOCTYPE HTML>
    <html>
    <head>  
    <meta charset="UTF-8">
    <script>
    window.onload = function () {

    var chart = new CanvasJS.Chart("chartContainer", {
        animationEnabled: true,
        zoomEnabled: true,
        title:{
            text: "Try Zooming and Panning" 
        },
        axisY :{
            includeZero:false
        },
        data: data  // random generator below
    });
    chart.render();

    }

    var limit = 1000;

    var y = 0;
    var data = [];
    var dataSeries = { type: "line" };
    var dataPoints = [];
    for (var i = 0; i < limit; i += 1) {
        y += (Math.random() * 10 - 5);
        dataPoints.push({
            x: i - limit / 2,
            y: y                
        });
    }
    dataSeries.dataPoints = dataPoints;
    data.push(dataSeries);               

    </script>
    <script src="../../canvasjs.min.js"></script>
    </head>
    <body>
    <div id="chartContainer" style="height: 370px; max-width: 920px; margin: 0px auto;">
    </div>
    </body>
    </html>

谢谢你的帮助

canvasjs
1个回答
0
投票

我想感谢CanvasJS的Indranil告诉我我做错了什么！这里有一个复制粘贴的错误。

这里有一个复制粘贴错误，其中for (var i = 0; i < limit; i += 1) { .... }被包含了，不应该是这样的。 没有必要用循环来绘制这6个点。 循环是造成从最后一个点到第一个点的额外线条。

所以最后的代码应该是

<!DOCTYPE HTML>
<html>
<head>  
<meta charset='UTF-8'>
<script>
window.onload = function () {

var chart = new CanvasJS.Chart('chartContainer', {
    animationEnabled: true,
    zoomEnabled: true,
    title:{
        text: 'Problem with Final (Polyline?) Segment from Last Point to Origin' 
    },
    axisY :{
        includeZero:false
    },
    data: data  // initialized below
});
chart.render();
}
var limit = 6;
var y = 0;
    var data = [];
var dataSeries = { type: 'line' };
var dataPoints = [];
DataPoints.push({
        x: 3425,
        y: 33.979673769168
});
DataPoints.push({
        x: 6850,
        y: 36.27403787497398
});
DataPoints.push({
        x: 10275,
        y: 37.742500031440834
});
DataPoints.push({
        x: 13700,
        y: 36.02631567584654
});
DataPoints.push({
        x: 17125,
        y: 34.75456508773836
});
DataPoints.push({
        x: 20550,
        y: 35.236592156677126
});
dataSeries.dataPoints = dataPoints;
data.push(dataSeries);               
</script>
<script src='./canvasjs.min.js'></script>
</head>
<body>
<div id='chartContainer' style='height: 370px; max-width: 920px; margin: 0px auto;'>
</div>
</body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.