Question

是否可以仅在折线图中显示点？我有这个basic line chart，我想隐藏它内部的线和填充，所以它只显示点。

这是我的代码：

var renChart = new Chart($('#ren-chart'), {
  type: 'line',
  data: {
    labels: ren_labels,
    datasets: [{
      label: 'Renovation',
      data: ren_data,
      backgroundColor: 'rgba(244, 81, 30, 0.5)',
      borderColor: 'rgba(244, 81, 30, 0.8)',
      pointBackgroundColor: 'rgba(244, 81, 30, 0.5)',
      pointBorderColor: 'rgba(244, 81, 30, 0.8)',
      pointRadius: 5
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true,
          stepSize: 20
        }
      }]
    }
  }
});

对此有任何帮助表示赞赏。提前谢谢。

Answer 1

您可以为数据集设置 showLine 属性为 false ，这会使图表隐藏边界线（以及background-fill），只显示数据点。

...
datasets: [{
   label: 'Renovation',
   data: ren_data,
   backgroundColor: 'rgba(244, 81, 30, 0.5)',
   borderColor: 'rgba(244, 81, 30, 0.8)',
   pointBackgroundColor: 'rgba(244, 81, 30, 0.5)',
   pointBorderColor: 'rgba(244, 81, 30, 0.8)',
   pointRadius: 5,
   showLine: false
}]
...

ᴅᴇᴍᴏ⧩

var chart = new Chart(ctx, {
   type: 'line',
   data: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
      datasets: [{
         label: 'Renovation',
         data: [3, 1, 4, 2, 5, 3],
         backgroundColor: 'rgba(244, 81, 30, 0.5)',
         borderColor: 'rgba(244, 81, 30, 0.8)',
         pointBackgroundColor: 'rgba(244, 81, 30, 0.5)',
         pointBorderColor: 'rgba(244, 81, 30, 0.8)',
         pointRadius: 5,
         showLine: false
      }]
   },
   options: {
      scales: {
         yAxes: [{
            ticks: {
               beginAtZero: true,
               stepSize: 2
            }
         }]
      }
   }
});

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

仅显示折线图中的点

1 个答案: