2017-07-14 125 views
2

我想用x,y坐标创建一个简单的折线图,但是我得到一个空白页。Chart.js - 用X,Y坐标绘制折线图

我不想设置标签,但让它们从x,y坐标自动生成。我认为chartjs已经实现了,但是我的语法是错误的。

var x = new Chart(document.getElementById("myChart1"), { 
    type: 'line', 
    data: { 
     datasets: [{ 
      label: "Test", 
      data: [{ 
       x: 0, 
       y: 5 
      }, { 
       x: 5, 
       y: 10 
      }, { 
       x: 8, 
       y: 5 
      }, { 
       x: 15, 
       y: 0 
      }], 
     }] 
    }, 
    options: { 
     responsive: true, 
    } 
}); 

任何想法如何解决上面的代码?

+0

你看过一些jsfiddles吗?比如这个https://jsfiddle.net/milostimotic/e8n4xd4z/ –

回答

5

我相信,你在找什么,是一个散布图,不线

var x = new Chart(document.getElementById("myChart1"), { 
 
    type: 'scatter', 
 
    data: { 
 
     datasets: [{ 
 
     label: "Test", 
 
     data: [{ 
 
      x: 0, 
 
      y: 5 
 
     }, { 
 
      x: 5, 
 
      y: 10 
 
     }, { 
 
      x: 8, 
 
      y: 5 
 
     }, { 
 
      x: 15, 
 
      y: 0 
 
     }], 
 
     }] 
 
    }, 
 
    options: { 
 
     responsive: true 
 
    } 
 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> 
 
<canvas id="myChart1"></canvas>

参考here,更多地了解散点图。

+0

版本2.7.1不会在散点图上连接点,而且它是有道理的,因为该操作尝试做的是折线图,而不是分散。 https://jsfiddle.net/sdz2ot42/ –