ChartJS：如何只留下没有线条的点数

Question

我有以下ChartJS图表：

  

我想知道如何删除点之间的连接线，因为我只需要显示点。

以下是实际代码：

 var data = {
                                  labels: ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"],
                                  datasets: [{
                                      data: [0.2, 0.1, 0.4, 0.1, 0.0, 0.5, 0.4]
                                  }, {
                                      data: [0.3, 0.2, 0.4, 0.4, 0.0, 0.7, 0.6]
                                      },
                                  {
                                      data: [0.4, 0.5, 0.5, 0.4, 0.0, 0.9, 0.7]
                                  },
                                  {
                                      data: [0.6, 0.7, 0.55, 0.6, 0.0, 0.9, 0.7]
                                  }]
                              };

                              var ctx = document.getElementById("LineWithLine").getContext("2d");

                              Chart.types.Line.extend({
                                  name: "LineWithLine",
                                  initialize: function () {
                                      Chart.types.Line.prototype.initialize.apply(this, arguments);
                                  },
                                  draw: function () {
                                      Chart.types.Line.prototype.draw.apply(this, arguments);

                                      var point = this.datasets[0].points[this.options.lineAtIndex]
                                      var scale = this.scale
                                      //console.log(this);

                                      // draw line
                                      this.chart.ctx.beginPath();
                                      this.chart.ctx.moveTo(scale.startPoint + 12, scale.calculateY(0.6));
                                      this.chart.ctx.strokeStyle = '#ff0000';
                                      this.chart.ctx.lineTo(this.chart.width, scale.calculateY(0.6));
                                      this.chart.ctx.stroke();

                                      // write TODAY
                                      this.chart.ctx.textAlign = 'center';
                                      //this.chart.ctx.fillText("TODAY", scale.startPoint + 35, point.y + 10);

                                      this.chart.ctx.restore();
                                  }
                              });

                              new Chart(ctx).LineWithLine(data, {
                                  datasetFill: false,
                                  lineAtIndex: 0.6
                              });

Answer 1

要仅显示点，您需要为数据集的 showLine 属性设置为 false 。

以下是一个例子：

var chart = new Chart(ctx, {
   type: 'line',
   data: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
      datasets: [{
         label: '# of votes',
         data: [3, 4, 1, 5, 6],
         pointBackgroundColor: 'black',
         pointRadius: 5,
         fill: false,
         showLine: false //<- set this
      }]
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>