如何使用chartJS在x轴上绘制范围标签

Question

bounty到期在15小时内。该问题的答案有资格获得+ 50声望赏金。LonelyCpp想要引起更多关注对此问题。

我希望在x轴上显示一个范围指示器，如图像中所示-

我尝试了一些注解插件，例如chartjs-plugin-annotation.js，但它们似乎不支持这种功能。

更笼统地说，这种标签是否有特定术语？ “范围指示器标签”未显示与此相关的任何内容。

Answer 1

看起来，在2.1.5版之前，您可以使用嵌套标签并获得所需的行为：第二行标签，可以在某些位置显示辅助信息。

var data = {
      labels: [['2015','Backtested'], '2016', '2017', ['2018', 'Live'], '2019', '2020'],

          datasets: [
            {
              label: "Set 1",
              data: [ 100, 200, 150, 250, 270, 300 ],
              backgroundColor: 'rgba(54, 162, 235, 0.2)',
              borderColor: 'rgba(54, 162, 235, 1)',
              borderWidth: 1
            },
            {
              label: "Set 2",
              data: [ 60, 250, 130, 300, 330, 340 ],
              backgroundColor: 'rgba(255, 99, 132, 0.2)',
              borderColor: 'rgba(255,99,132,1)',
              borderWidth: 1
            }
          ]
    };

var canvas = document.getElementById('chart');
new Chart(canvas, {
  type: 'line',
  data: data,
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }],
      xAxes: [{

      }]
    }
  }
});

JSFiddle

---

Kudos：​​

[1] ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2