2016-01-06 70 views
0

我發現例如用於使用分組類別highchart這裏:如何結合highchart數據?

$(function() { 
var chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: "container", 
     type: "column", 
     borderWidth: 5, 
     borderColor: '#e8eaeb', 
     borderRadius: 0, 
     backgroundColor: '#f7f7f7' 
    }, 
    title: { 
     style: { 
      'fontSize': '1em' 
     }, 
     useHTML: true, 
     x: -27, 
     y: 8, 
     text: '<span class="chart-title"> Grouped categories <span class="chart-href"> <a href="http://www.blacklabel.pl/highcharts" target="_blank"> Black Label </a> </span> <span class="chart-subtitle">plugin by </span></span>' 
    }, 
    series: [{ 
     data: [4, 14, 18, 5, 6, 5, 14, 15, 18] 
    }], 
    xAxis: { 
     categories: [{ 
      name: "Fruit", 
      categories: ["Apple", "Banana", "Orange"] 
     }, { 
      name: "Vegetable", 
      categories: ["Carrot", "Potato", "Tomato"] 
     }, { 
      name: "Fish", 
      categories: ["Cod", "Salmon", "Tuna"] 
     }] 
    } 
}); 

});

和用於化妝多列按類別這裏的例子:

$(function() { 
$('#container').highcharts({ 
    chart: { 
     type: 'column' 
    }, 
    title: { 
     text: 'Monthly Average Rainfall' 
    }, 
    subtitle: { 
     text: 'Source: WorldClimate.com' 
    }, 
    xAxis: { 
     categories: [ 
      'Jan', 
      'Feb', 
      'Mar', 
      'Apr', 
      'May', 
      'Jun', 
      'Jul', 
      'Aug', 
      'Sep', 
      'Oct', 
      'Nov', 
      'Dec' 
     ], 
     crosshair: true 
    }, 
    yAxis: { 
     min: 0, 
     title: { 
      text: 'Rainfall (mm)' 
     } 
    }, 
    tooltip: { 
     headerFormat: '<span style="font-size:10px">{point.key}</span><table>', 
     pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + 
      '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>', 
     footerFormat: '</table>', 
     shared: true, 
     useHTML: true 
    }, 
    plotOptions: { 
     column: { 
      pointPadding: 0.2, 
      borderWidth: 0 
     } 
    }, 
    series: [{ 
     name: 'Tokyo', 
     data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 

    }, { 
     name: 'New York', 
     data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3] 

    }, { 
     name: 'London', 
     data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2] 

    }, { 
     name: 'Berlin', 
     data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1] 

    }] 
}); 

});

現在我的問題是:如何結合兩個圖表?我希望每個類別都有多個列,如演示2

+0

[Demo 1](http://jsfiddle.net/BlackLabel/TFhd7/?utm_source=website&utm_medium=embed&utm_campaign=TFhd7)[Demo 2](http://jsfiddle.net/gh/get/jquery/1.9。 1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/column-basic /)鏈接到JsFiddel – Ihenry

+1

在系列對象中添加多個系列,如第二個演示。 http://jsfiddle.net/4pmnaw28/1/ –

+0

謝謝:D它工作 – Ihenry

回答

1

在系列對象中添加多個系列,就像在第二個演示中一樣。

series: [{ 
     data: [4, 14, 18, 5, 6, 5, 14, 15, 18] 
    },{ 
     data: [4, 14, 18, 5, 6, 5, 14, 15, 18] 
    },{ 
     data: [4, 14, 18, 5, 6, 5, 14, 15, 18] 
    },{ 
     data: [4, 14, 18, 5, 6, 5, 14, 15, 18] 
    }], 

http://jsfiddle.net/4pmnaw28/1

+1

謝謝你:D但現在我不需要它了哈哈xD – Ihenry