Question

我需要在Chart Js折线图中显示线性数据。使用Chart JS 2.0.0及更高版本的数据点设置不正确，应该显示为直线的线似乎有粗糙的边缘。

放大页面时，边缘变得更加明显。

var data = {
    labels :['January', 'February', 'March', 'April', 'June', 'July', 'August',
        'September', 'October', 'November', 'December', 'January', 'February', 'March', 'April', 'June', 'July',
        'August', 'September', 'October', 'November', 'December', 'January', 'February', 'March', 'April', 'June', 'July', 'August',
        'September', 'October', 'November', 'December', 'January', 'February', 'March', 'April', 'June', 'July'
    ],
    datasets : [
        {
            fillColor : "rgba(252,233,79,0.5)",
            strokeColor : "rgba(82,75,25,1)",
            pointColor : "rgba(166,152,51,1)",
            pointStrokeColor : "#fff",
            data : [1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0, 17.0, 18.0, 19.0, 20.0, 21.0, 22.0, 23.0, 24.0, 25.0, 26.0, 27.0, 28.0, 29.0, 30.0, 31.0, 32.0, 33.0, 34.0, 35.0, 36.0, 37.0, 38.0,39.0 ]

        }
    ]
}
var ctx = $("#myChart").get(0).getContext("2d");
var opts = { 
       type: 'line', 
      data: data, 
       options: {} 
     };
new Chart(ctx, opts);

在Chart JS 1.0.2中，数据点设置正确，线条笔直。

http://jsfiddle.net/AnchaXD/hg6f2fqo/

var data = {
    labels : ['January', 'February', 'March', 'April', 'June', 'July', 'August',
        'September', 'October', 'November', 'December', 'January', 'February', 'March', 'April', 'June', 'July',
        'August', 'September', 'October', 'November', 'December', 'January', 'February', 'March', 'April', 'June', 'July', 'August',
        'September', 'October', 'November', 'December', 'January', 'February', 'March', 'April', 'June', 'July'
    ],
    datasets : [
        {
            fillColor : "rgba(252,233,79,0.5)",
            strokeColor : "rgba(82,75,25,1)",
            pointColor : "rgba(166,152,51,1)",
            pointStrokeColor : "#fff",
            data : [1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0, 17.0, 18.0, 19.0, 20.0, 21.0, 22.0, 23.0, 24.0, 25.0, 26.0, 27.0, 28.0, 29.0, 30.0, 31.0, 32.0, 33.0, 34.0, 35.0, 36.0, 37.0, 38.0,39.0 ]

        }
    ]
}

var ctx = $("#myChart").get(0).getContext("2d");


new Chart(ctx).Line(data, {});

我已经尝试通过将Bezier Curve Tension设置为0并将cubicInterpolationMode设置为单调来解决此问题。

有没有人有同样的问题或任何想法如何解决这个问题？

提前致谢。

Chart JS 2.0.0及更高版本不正确地设置数据点，因此线性数据线不直

0 个答案: