Question

Example

我正在尝试使用chart.js文档中的autoSkip功能：

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）-根据我对Chartjs的经验，我发现尝试对其进行修复并查看是否会有所不同窍门

Answer 2

您可以尝试更改

distribution: series

到

distribution: linear

在我看来，尽管您丢失了3天（也许是周末？）的数据，但它似乎试图均匀地分配数据空间。它确实不应该破坏您的标签...但是我敢打赌，标签知道图形上有足够的空间容纳n个标签，但他们没有意识到三个标签被挤压在一起了。

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

Answer 3

对于任何想知道的人，chartjs开发人员在这里回复了我的帖子：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中实现“自动跳过”功能？

4 个答案: