如何在 chartjs 中实现 'autoskip' 功能？

Question

Example

我正在尝试使用 chart.js 文档中的自动跳过功能：

https://www.chartjs.org/docs/latest/axes/cartesian/?h=autoskip

我遇到的问题是我的 x 轴标签重叠（见上例）。我读过的所有内容都说这个 autoSkip 功能应该自动跳过重叠的标签。但是，当将其设置为 true 或 false 时，我的图表似乎没有任何变化。

 <Line
    data={this.state.chartData}
    options={{
      elements: {
        point: {
          radius: 2
        }
      },
      tooltips: {
        mode: 'nearest',
        intersect: false
      },
      scales: {
        yAxes: [{
          ticks: {
            stepSize: 1, //sets the interval that our y axis counts by
            beginAtZero: false, //starts our graph at 0 if true
          },
          gridLines: {
            drawOnChartArea: false
          }
        }],
        xAxes: [{
          ticks: {
            minRotation: 88,
            autoskip: true,
            autoSkipPadding: 50
          },
          gridLines: {
            drawOnChartArea: false
          },
          type: 'time',
          distribution: 'series',
          time: {
            unit: 'day',
            displayFormats: {
              day: 'MMM D',

            },
            tooltipFormat: 'MMM D h:mm a',
          },
        },
        ]
      },
      responsive: true, //lets us resize our chart
      maintainAspectRatio: true,  //lets us resize our chart
    }
    }

  />

Answer 1

我注意到你的 autoskip 是小写的，而在文档中它是 camlcase（即 autoSkip） - 根据我使用 Chartjs 的经验，我发现尝试修复它可能会有所不同，看看是否这样就可以了

Answer 2

您可以尝试更改

distribution: series

至

distribution: linear

在我看来，它试图 space 均匀地处理数据，尽管事实上您丢失了 3 天的数据（也许是周末？）。它真的不应该破坏你的标签...但我敢打赌标签知道图表上的 n 个标签已经足够 space，但他们没有意识到其中三个标签被挤压在一起。

默认分布是线性的，因此您也可以将其删除。 (https://www.chartjs.org/docs/latest/axes/cartesian/time.html#scale-distribution)

Answer 3

对于任何想知道的人，chartjs 开发人员已在此处回复我的 post：https://github.com/chartjs/Chart.js/issues/6591

当前的 Chart.js 版本似乎存在一些问题。应该在 2.9 中修复。

Answer 4

如果有人想知道，请更新到 2.9。确认问题在那里得到解决。

https://github.com/chartjs/Chart.js/issues/6591

如何在 chartjs 中实现 'autoskip' 功能？

How do I implement the 'autoskip' feature in chartjs?

javascript

reactjs

chart.js