仅显示折线图中的点答案

【问题标题】：Display only points in line chart仅显示折线图中的点
【发布时间】：2017-09-19 19:00:04
【问题描述】：

是否可以只显示折线图中的点？我有这个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
        }
      }]
    }
  }
});

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

【问题讨论】：

标签： jquery charts linechart chartjs-2.6.0

【解决方案1】：

您可以为您的数据集设置 showLine 属性为 false，这将使图表隐藏边框线（以及背景填充），并且只显示数据点。

...
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>

【讨论】：

谢谢！做到了