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

相關問題