2

我是新来的。

我想将折线图的最后一个块（从 2020 年 5 月 27 日到 2020 年 5 月 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图表截图供参考... 在此处输入图像描述

请指导我正确的方向。

4

1 回答 1

4

插件核心 API提供了一系列可用于执行自定义代码的钩子。您可以使用beforeDraw钩子直接在画布上使用文本在不同数据点之间绘制不同样式的线条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>

于 2020-05-30T09:45:41.920 回答