时间戳

首页 > 解决方案 > CanvasJS（2.3.2 版）在第一个数据点和最后一个数据点之间出现不需要的线

canvasjs - CanvasJS（2.3.2 版）在第一个数据点和最后一个数据点之间出现不需要的线

问题描述

我发现了一个现有的类似问题，但那里的解决方案无法解决我的问题。我的数据按数字排序，没有空值。

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

解决方案

我要感谢 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>

推荐阅读