CanvasJS（版本2.3.2）在第一个数据点和最后一个数据点之间出现不必要的行

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

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

html文件与CanvasJS line-chart-with-zoom-pan.html几乎相同。我更改了标题，将自己的数据点放在其中，而不是使用随机数生成器，并从与html文件相同的目录中加载canvas.js。

一切工作都很好，很简单！ ...除了该多余的行没有显示在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>

感谢您提供所有帮助！

我发现了一个现有的类似问题，但是那里的解决方案无法解决我的问题。我的数据按数字顺序排序，没有空值。 html文件几乎与CanvasJS line -...

canvasjs
1个回答
0
投票

我要感谢CanvasJS的Indranil告诉我我做错了！

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.