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

沃梦达教程前端问题

2022-01-01

Chart.js Line Graph: Start a line in the middle of a graph(Chart.js 折线图:在图的中间开始一条线)

本文介绍了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>

这篇关于Chart.js 折线图:在图的中间开始一条线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

沃梦达教程

本文标题为：Chart.js 折线图:在图的中间开始一条线