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

gpnt7bae 于 2023-02-12 发布在 Chart.js

关注(0)|答案(2)|浏览(188)

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

绿色线就是我所说的，即数据集是否可能从左侧开始

chart.js

来源：https://stackoverflow.com/questions/68692588/chart-js-line-graph-start-a-line-in-the-middle-of-a-graph

2条答案

按热度按时间

lztngnrs1#

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

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>

赞(0）回复(0）举报 2023-02-12

mec1mxoz2#

您可以使用offset选项快速完成此操作。

- 示例：**

const options = {
   ...otherChartOptions,
   
   scales: {
     x: {
       offset: true
     },
     y: {
       offset: true
     }
   }
 };

参考：https://www.chartjs.org/docs/latest/axes/cartesian/linear.html

赞(0）回复(0）举报 2023-02-12

我来回答

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

2条答案

相关问题

热门标签

最新问答