Chart.js 折线图:在图的中间开始一条线

2022-01-22 00:00:00 javascript chart.js

我想知道是否可以有多条线的图形，但我希望其中一条线从图形的中间开始，而其余的线仍然从左边开始.这可能吗?它看起来像这样:

I'm wondering if it is possible to have a graph with multiple lines, but I want one of the lines to start from the middle of the graph, while the rest of the lines still start from all the way at the left. Is this possible? It'd look like this:

绿线是我所说的，数据集是否有可能从不从左边开始

The green line is what I am talking about, whether it would be possible for a dataset to start from not all the way at the left

推荐答案

是的，这是可能的，你可以通过 2 种方式来实现，一种是使用其 x 和 y 坐标指定每个数据点，另一种是放置一些 null 数据数组开头的值:

Yes this is possible, you can achieve this in 2 ways, 1 is to specify each datapoint using its x and y coordinate another one is to place some null values in the start of your data array:

var options = {
  type: 'line',
  data: {
    labels: [1, 2, 3, 4, 5, 6],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderColor: 'pink'
      },
      {
        label: '# of Points',
        data: [{
          x: 3,
          y: 6
        }, {
          x: 4,
          y: 8
        }, {
          x: 5,
          y: 2
        }, {
          x: 6,
          y: 12
        }],
        borderColor: 'orange'
      },
      {
        label: '# of Points2',
        data: [null, null, null, 9, 13, 15],
        borderColor: 'lightblue'
      }
    ]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          reverse: false
        }
      }]
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.js"></script>
</body>

相关文章