使用Highcharts.js在x轴上显示日期(displaying dates on x axis with Highcharts.js)

我正在用highcharts.js建立一个条形图。 x轴是日期数组，而y轴是0-100的数字数组。我想在X轴上显示日期，但只在有新日期时显示刻度。如果你看这个小提琴你可以看到当前的情节以及日期看起来如何糟糕。看看这个小提琴，以及它如何以优雅的方式显示日期。基本上我只想在绘制许多数据点时在x轴上显示几个刻度。

$(function () { $('#container').highcharts({ chart: { type: 'column' }, title: { text: 'Monthly Average Rainfall' }, subtitle: { text: 'Source: WorldClimate.com' }, xAxis: { categories: dates , crosshair: true }, yAxis: { min: 0, title: { text: 'Rainfall (mm)' } }, tooltip: { headerFormat: '<span style="font-size:10px">{point.key}</span><table>', pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>', footerFormat: '</table>', shared: true, useHTML: true }, plotOptions: { column: { pointPadding: 0.2, borderWidth: 0 } }, series: [{ name: 'Tokyo', data: ticks }] });

I’m building a bar chart with highcharts.js. The x-axis is an array of dates, while the y-axis is an array of numbers from 0-100. I want to display the dates on the X axis but only show ticks when there is a new date. If you look at this fiddle you can see the current plot and how the dates look bad. Look at this fiddle and how it displays the dates in an elegant way. Essentially I want to only show a few ticks on the x-axis while plotting many data points.

$(function () { $('#container').highcharts({ chart: { type: 'column' }, title: { text: 'Monthly Average Rainfall' }, subtitle: { text: 'Source: WorldClimate.com' }, xAxis: { categories: dates , crosshair: true }, yAxis: { min: 0, title: { text: 'Rainfall (mm)' } }, tooltip: { headerFormat: '<span style="font-size:10px">{point.key}</span><table>', pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>', footerFormat: '</table>', shared: true, useHTML: true }, plotOptions: { column: { pointPadding: 0.2, borderWidth: 0 } }, series: [{ name: 'Tokyo', data: ticks }] });