charts.js直线 - 我无法找到解决方案

时间:2015-02-17 18:12:16

标签: javascript chart.js

所以即时通讯使用了chart.js http://www.chartjs.org/,我试图让两个点之间的线条笔直,不会因为没有原因而弯曲。

现在看起来像那样 http://imgur.com/RrdRgAR,N31ajM7#1

我希望它看起来像基本的代数图应该看起来 像上面链接中的其他图片

当前数据集:

                label: "Shop Sales",
                fillColor : "rgba(255, 89, 114, 0.6)",
                strokeColor : "rgba(51, 51, 51, 1)",
                pointColor : "rgba(255, 89, 114, 1)",
                pointStrokeColor : "#fff",
                pointHighlightFill : "#fff",
                pointHighlightStroke : "rgba(151,187,205,1)",
                maintainAspectRatio: false,

window.onload = function(){
    var ctx = document.getElementById("canvas").getContext("2d");

    window.myLine = new Chart(ctx).Line(lineChartData, {
responsive: true, scaleFontColor: "#FF5972" }

)};

谢谢你,我在网上到处搜索这个

2 个答案:

答案 0 :(得分:10)

将选项bezierCurve设置为false

window.onload = function(){
    var ctx = document.getElementById("canvas").getContext("2d");

    window.myLine = new Chart(ctx).Line(lineChartData, {
      responsive: true, 
      scaleFontColor: "#FF5972",
      bezierCurve: false
    });

});

It's right there in the Line Chart option list.。您也可以让它们弯曲,但通过保留选项集然后改变bezierCurveTension属性来“更硬”。

答案 1 :(得分:2)

看起来它已经被v2.0更改了。现在是tension:0。在撰写本文时,文档声明它是lineTension:0,但这似乎不正确。