Highcharts：在单个类别中绘制多个值

Question

我对 Highcharts 很陌生。我想制作一个示例图表，例如：

主要问题是，单个类别中有多个值。我无法减轻这种情况。

我写过这样的东西

$('#container').highcharts({
    title: '',
    credits: {
      enabled: false
    },
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar']
    },
    yAxis: {
      min: 0,
      title: {
        text: ''
      }
    },
    series: [
      {
        type: 'column',
        showInLegend: false,
        data: [[0, 5000, 11000], [0, 6000, 10000], [0, 8000, 5000], [1000, 2000, 4000], 
          [1000, 9000, 4800], [1500, 10000, 4000], [0, 6500, 4500]],
        color: '#75b5ec'
      },
      {
        type: 'spline',
        data: [3, 2.67, 3],
        showInLegend: false,
        marker: {
          lineWidth: 2,
          lineColor: '#000000',
          fillColor: 'white'
        }
      }
    ]
  });

请帮忙。提前致谢。

Answer 1

您可以简单地将 xAxis 上的 tickInterval 设置为 4。

另一个可能给您更多控制权的选项是根本不使用类别，而是切换到使用日期时间轴。这样，highcharts 负责绘制月份等。可以在此处找到一个简单的示例：

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/xaxis/type-datetime/

此处有关轴类型的文档：http://api.highcharts.com/highcharts#xAxis.type

要绘制您想要的内容，请更改该示例以将另一个系列添加到图表中，类型为“列”。像这样的：

series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 185.6, 200.5, 216.4, 194.1, 95.6, 54.4],
        pointStart: Date.UTC(2010, 0, 1),
        pointInterval: 24 * 3600 * 1000 // one day
    },{
        type:'column',
        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],
        pointStart: Date.UTC(2010, 0, 1),
        color:'red',
        pointInterval: 24 * 3600 * 1000 // one day
    }]

http://jsfiddle.net/1uc6sksx/

您可以使用 xAxis 上的 tickInterval 选项控制 x 轴上的标签，例如

xAxis: {
        type: 'datetime',
        tickInterval:24*3600*1000*30*3
    },

将滴答之间的间隔设置为大约 3 个月。 http://jsfiddle.net/x29xc993/