使用chartJS显示带有连接点的折线图

javascript charts google-visualization chart.js

6419 观看

1回复

321 作者的声誉

我想使用ChartJS绘制这样的图表。但是我找不到连接第一个和最后一个点并在该连接区域内显示单个唯一点的解决方案。而且我还需要为每个点设置不同的颜色。我尝试浏览ChartJS文档,但找不到解决方案。是否有任何具有这些功能的图表图形库,或者如何使用ChartJS?

在此处输入图片说明

作者: Randika 的来源 发布者: 2017 年 9 月 15 日

回应 1


15

19490 作者的声誉

决定

您可以创建散点图,而不是折线图

这是一个例子:(
试图复制给定的图像amap)

var chart = new Chart(ctx, {
   type: 'scatter',
   data: {
      datasets: [{
         data: [{
            x: 1,
            y: 1
         }, {
            x: 3,
            y: 7
         }, {
            x: 6,
            y: 5
         }, { // add same data as the first one, to draw the closing line
            x: 1,
            y: 1
         }],
         borderColor: 'black',
         borderWidth: 1,
         pointBackgroundColor: ['#000', '#00bcd6', '#d300d6'],
         pointBorderColor: ['#000', '#00bcd6', '#d300d6'],
         pointRadius: 5,
         pointHoverRadius: 5,
         fill: false,
         tension: 0,
         showLine: true
      }, {
         data: [{
            x: 3.5,
            y: 4.5
         }],
         pointBackgroundColor: 'orange',
         pointBorderColor: 'darkorange',
         pointRadius: 10,
         pointHoverRadius: 10
      }]
   },
   options: {
      legend: false,
      tooltips: false,
      scales: {
         xAxes: [{
            ticks: {
               min: 0,
               max: 10
            },
            gridLines: {
               color: '#888',
               drawOnChartArea: false
            }
         }],
         yAxes: [{
            ticks: {
               min: 0,
               max: 8,
               padding: 10
            },
            gridLines: {
               color: '#888',
               drawOnChartArea: false
            }
         }]
      }
   }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>

注意:这只是一个示例,您可以按照官方文档进一步对其进行自定义以满足您的需要。

作者: ɢʀᴜɴᴛ 发布者: 2017 年 9 月 16 日
32x32