Question

我正在寻找类似的东西。一半灰色，一半白色。

Answer 1

使用chartjs-plugin-annotation。具体来说，是box注释。

这是一个例子：

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

new Chart(ctx, {
  type: 'line',
  data: {
    labels: [1, 2, 3, 4, 5],
    datasets: [{
      label: 'Rainfall',
      data: [200, 90, 120, 400, 500],
      fill: false,
      borderColor: 'green',
      backgroundColor: 'green',
    }]
  },
  options: {
    annotation: {
      annotations: [{
        type: 'box',
        xScaleID: 'x-axis-0',
        yScaleID: 'y-axis-0',
        xMin: 1,
        xMax: 3,
        backgroundColor: 'rgba(200, 200, 200, 0.7)',
        borderColor: '#eee',
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js" integrity="sha512-QEiC894KVkN9Tsoi6+mKf8HaCLJvyA6QIRzY5KrfINXYuP9NxdIkRQhGq3BZi0J4I7V5SidGM3XUQ5wFiMDuWg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.js"></script>

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

如何遮蔽ChartJS行的一部分grph =

1 个答案: