如何将 chart.js 的某些部分显示为虚线，而其余部分显示为粗体？

Question

我是新手。

我想将折线图的最后一个块（从 2020/05/27 到 2020/05/29）显示为与图表其余部分不同颜色的虚线。

简而言之，我想突出图表读数的最后一个块而不是其余部分。

 var ctx = document.getElementById('myChart').getContext('2d');
        var data_array = [307.65, 309.54, 307.71, 314.96, 313.14, 319.23, 316.85, 318.89, 316.73, 318.11, 319.55];
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: ['2020/05/13', '2020/05/14', '2020/05/15', '2020/05/18', '2020/05/19', '2020/05/20', '2020/05/21', '2020/05/22', '2020/05/26', '2020/05/27', '2020/05/29'],
                datasets: [{
                    label: 'Count',
                    data: data_array,
                    lineTension: 0,
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                    ],
                    borderWidth: 5
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            min: Math.round(Math.floor(Math.min.apply(this, data_array) - 50)/ 10) * 10,
                            max: Math.round(Math.floor(Math.max.apply(this, data_array) + 50)/ 10) * 10
                        }
                    }]
                }
            }
        });

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
        integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>

    <title>CodeWithHarry</title>
</head>

<body>

    <canvas id="myChart" width="1000" height="1000"></canvas>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
        integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
        integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
        crossorigin="anonymous"></script>
</body>

</html>

PFA图表截图供参考...

请指导我正确的方向。

Answer 1

Plugin Core API offers a range of hooks that may be used for performing custom code. You can use the beforeDraw hook to draw lines of different style between different datapoints using text directly on the canvas using CanvasRenderingContext2D.

如果最后一个数据点的颜色也不同，您可以将dataset.borderColor定义为数组。它应该包含每个值的条目，除了最后一个值外，所有值都相同。这可以用 Array.map() 完成，如下所示。

borderColor: data_array.map((v, i) => i + 1 == data_array.length ? 'rgb(0, 0, 255)' : 'rgba(255, 99, 132)'),

请查看下面的可运行代码片段。

const data_array = [307.65, 309.54, 307.71, 314.96, 313.14, 319.23, 316.85, 318.89, 316.73, 318.11, 319.55];

var myChart = new Chart('myChart', {
  type: 'line',  
  plugins: [{
    beforeDraw: chart => {
      var ctx = chart.chart.ctx;
      ctx.save();
      var xAxis = chart.scales['x-axis-0'];
      var yAxis = chart.scales['y-axis-0'];
      data_array.forEach((value, index) => {
        if (index > 0) {
          var valueFrom = data_array[index - 1];
          var xFrom = xAxis.getPixelForTick(index - 1);
          var yFrom = yAxis.getPixelForValue(valueFrom);
          var xTo = xAxis.getPixelForTick(index);
          var yTo = yAxis.getPixelForValue(value);      
          ctx.lineWidth = 5;
          if (index + 1 == data_array.length) {            
            ctx.setLineDash([5, 5]);
            ctx.strokeStyle = 'rgb(0, 0, 255)';
          } else {
            ctx.strokeStyle = 'rgb(255, 99, 132)';            
          }
          ctx.beginPath();
          ctx.moveTo(xFrom, yFrom);
          ctx.lineTo(xTo, yTo);
          ctx.stroke();
        }
      });
      ctx.restore();
    }
  }],
  data: {
    labels: ['2020/05/13', '2020/05/14', '2020/05/15', '2020/05/18', '2020/05/19', '2020/05/20', '2020/05/21', '2020/05/22', '2020/05/26', '2020/05/27', '2020/05/29'],
    datasets: [{
      label: 'Count',
      data: data_array,
      tension: 0,
      showLine: false,
      borderColor: data_array.map((v, i) => i + 1 == data_array.length ? 'rgb(0, 0, 255)' : 'rgba(255, 99, 132)'),
      borderWidth: 5
    }]
  },
  options: {
    animation: {
        duration: 0
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="100"></canvas>

如何将 chart.js 的某些部分显示为虚线，而其余部分显示为粗体？

How to display certain part of chart.js as dotted while rest as bold?

javascript

jquery

dotted-line

chart.js