Chartjs 2 数据集之间的折线图单笔画

Question

我正在尝试在图表上的每个数据点之间制作一个单笔画的折线图。数据点的每一侧之间应该有一个小的 space。

我看到文档说要使用 borderDash，但笔划将运行通过我的数据点，而不是仅在数据点之间。我正在寻找一种在每个数据点周围添加 padding/margin 的方法，但我没有看到这样做的方法。

Answer 1

由于您指出的 borderDash 限制，我认为获得所需效果的最简单方法是结合使用 pointRadius、backgroundColor、pointBorderColor, 和 pointBorderWidth.

它的工作原理是在每个点周围创建一个白色边框，使它看起来像有一个间隙。

例如：

backgroundColor: '#000',
pointRadius: 5,
pointBorderColor: '#fff',
pointBorderWidth: 3,

这是它的样子：

这是一个可运行的片段：

const ctx = document.getElementById('myChart').getContext('2d');

new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    datasets: [{
      borderColor: '#000',
      backgroundColor: '#000',
      pointRadius: 5,
      pointBorderColor: '#fff',
      pointBorderWidth: 3,
      lineTension: 0,
      data: [6.06, 82.2, -22.11, 21.53, -21.47, 73.61, -53.75, -60.32, -30, 20, 22, 25],
      label: 'Dataset',
      fill: false,
    }, ],
  },
  options: {
    scales: {
      xAxes: [{
        gridLines: {
          drawOnChartArea: false,
          drawTicks: false
        }
      }],
      yAxes: [{
        gridLines: {
          drawOnChartArea: false,
          drawTicks: false
        }
      }]
    },
    legend: {
      display: false
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>

<body>
  <canvas id="myChart" width="600" height="400"></canvas>
</body>

Chartjs 2 数据集之间的折线图单笔画

Chartjs 2 Line Graph Single Stroke Between Datasets

chart.js

react-chartjs