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

问题描述 投票：1回答：1

我是新来的。

我想将折线图的最后一个块（从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/[email protected]/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图表截图以供参考...enter image description here

请向正确的方向引导我。

javascript jquery chart.js dotted-line
1个回答
0
投票

Plugin Core API提供了一系列可用于执行自定义代码的挂钩。您可以使用beforeDraw钩子直接在画布上使用CanvasRenderingContext2D在文本上绘制不同数据点之间的线。

CanvasRenderingContext2D
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: 'rgba(255, 99, 132)',
      borderWidth: 5
    }]
  },
  options: {
    animation: {
        duration: 0
    }
  }
});
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.