2015-03-13 54 views
3

我是Highcharts的新手。我想打一个示例图表所示: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' 
     } 
     } 
    ] 
    }); 

请帮助。提前致谢。

+0

看起来就像[演示之一](http://www.highcharts.com/demo/combo-dual-axes)。 – 2015-03-13 09:51:39

+0

这是,但他不想要所有的xAxis标签。所有他需要做的是使用, tickInterval:4。 http://jsfiddle.net/4bf06xvv/ – SteveP 2015-03-13 11:30:37

回答

0

你可以简单的设置tickInterval的X轴,以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/

可以使用在x轴的tickInterval选项控制在x轴的标签,例如

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

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

+0

嗨SteveP, 谢谢你的回答。但是,问题是,我只能在x轴下显示三个标签。 'Jan','Feb'和'Mar'。这可能吗? – 2015-03-13 09:54:05

+0

我已经更新了我的答案,以帮助解决这个问题。您需要使用tickInterval选项。 – SteveP 2015-03-13 11:27:04