我可以在高图中的标签上只显示不同的日期吗?

时间:2018-03-16 07:04:12

标签: javascript jquery angular highcharts

enter image description here

是否可以减少高图中标签的拥塞,如屏幕截图所示?

1 个答案:

答案 0 :(得分:0)

这是一个小提琴,您可以更改tickInterval以更新图表:http://jsfiddle.net/ucL63dye/28/

var timearray = [];
var time = new Date().valueOf();
var delay = 50 * 60 * 1000; //50 minutes
for (var i=0; i<12; i++) {
  timearray[i] = new Date(i * delay + time).toLocaleString('en-us', {day: 'numeric', month: 'short', hour: 'numeric', minute: 'numeric', hour12: false});;
}
Highcharts.chart('container', {
    legend: {
        enabled: false
    },
    xAxis: {
        title: {
            text: 'Date'
        },
        tickmarkPlacement: 'on',
        tickInterval: 3,
        categories: timearray
    },
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
});
#container {
	min-width: 310px;
	max-width: 800px;
	height: 400px;
	margin: 0 auto
}
#tick {
  width: 50px;}
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>