Question

我对Highcharts很新。我想制作一个样本图表，如：

Highchart Column And Spline

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

我写过这样的东西

$('#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

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

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/

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

1 个答案: