使用chartJS顯示連接點的折線圖js

Question

我想用ChartJS繪製這樣的圖表。但是我找不到連接第一個和最後一個點並在連接區域內顯示單個唯一點的解決方案。而且我需要用不同的顏色來設計每個點。我試圖探索ChartJS文檔，但找不到解決方案。是否有任何圖表繪圖庫具有這些功能或如何使用ChartJS來完成此功能？

Answer 1

您可以創建一個scatter chart代替line。

這裏是一個example：
^{（試圖複製你給定的圖像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>

^{注：這只是一個例子，你可以自定義進一步滿足您的需求，繼official documentation。}