空圆圈 - ChartJS 折线图中仅点描边答案

【问题标题】：Empty circle - only point strok in line chart for ChartJS空圆圈 - ChartJS 折线图中仅点描边
【发布时间】：2017-11-14 14:21:12
【问题描述】：

如何在 chartJS 折线图中实现这种点？

【问题讨论】：

标签： angular charts chart.js chartjs-2.6.0

【解决方案1】：

这是一个获取您所追求的点样式的示例：

折线图点选项的文档可以在here找到

以下代码here的codePen

HTML：

<html>
  <body>
    <div class="myChartDiv">
      <canvas id="myChart" width="600" height="400"></canvas>
    </div>
  </body>
</html>

JS：

new Chart(document.getElementById("myChart"), {
  type: "line",
  data: {
    labels: ["January", "February", "March", "April", "May", "June"],
    datasets: [
      {
        label: "My First Dataset",
        data: [20, 25, 22, 19, 31, 40],
        fill: true,
        borderColor: "rgb(75, 192, 192)",
        backgroundColor: "rgba(0,0,0,0.1)",
        borderWidth: 2,
        lineTension: 0,
        /* point options */
        pointBorderColor: "blue", // blue point border
        pointBackgroundColor: "white", // wite point fill
        pointBorderWidth: 1, // point border width
      }
    ]
  },
  options: {
    legend: {
      labels: {
        usePointStyle: true, // show legend as point instead of box
        fontSize: 10 // legend point size is based on fontsize
      }
    }
  }
});

【讨论】：