JSON数据的Highcharts组合图

Question

我正在创建一个从数据库中获取数据的组合图表。我能够导入所有数据并将其呈现为单一类型，即列。虽然有一个系列我想以样条线类型渲染。我正在关注的教程只教授单一类型的渲染，所以我有点迷失在这里。

这是我的 JavaScript

$(document).ready(function(){
var options = {
chart: {
renderTo: 'fetch-render',
type: 'column',

},
xAxis: {
    title: {
text: 'Date'
},
categories: []
},
yAxis: {
title: {
text: 'Number'
},
series: []
}


$.getJSON("includes/fetch-data.php", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
options.series[1] = json[2];
/*so on...... */
options.series[7] = json[8];
/* i want to draw this series in spline */
options.series[8] = json[9];

chart = new Highcharts.Chart(options);
});
        })

我想将系列 8 中的数据绘制为样条曲线，这与其他以列类型绘制的曲线不同

Answer 1

Highcharts Demos 有各种使用 Highcharts 的演示。其中一个展示了如何在同一张图表中绘制不同类型的系列：http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/combo/

基本上，您无需像以前那样在chart 对象上定义type，而是在series 对象上为每个系列设置type：

    series: [{
        type: 'column',
        name: 'Jane',
        data: [3, 2, 1, 3, 4]
    }, {
        type: 'column',
        name: 'John',
        data: [2, 3, 5, 7, 6]
    }, {
        type: 'column',
        name: 'Joe',
        data: [4, 3, 3, 9, 0]
    }, {
        type: 'spline',
        name: 'Average',
        data: [3, 2.67, 3, 6.33, 3.33],
        marker: {
            lineWidth: 2,
            lineColor: Highcharts.getOptions().colors[3],
            fillColor: 'white'
        }
    }

Answer 2

感谢@João Menighin 的提醒。我采用了demo中给出的方法。它更整洁，更干净，可用于根据需要添加任意数量的图表类型。这是其他人想要制作从数据库中获取数据的组合图表的代码。

$(document).ready(function(){
            $.getJSON("includes/fetch-data.php", function(json){

Highcharts.chart('fetch-render', {
    title: {
        text: 'Fetched Data'
    },
    xAxis: {
        categories: json[0]['data']
    },

    series: [{
        type: json[1]['type'],
        name: json[1]['name'],
        data: json[1]['data']
    }, {
        type: json[2]['type'],
        name: json[2]['name'],
        data: json[2]['data']
    }, {
        type: json[3]['type'],
        name: json[3]['name'],
        data: json[3]['data']
    },{
        type: json[4]['type'],
        name: json[4]['name'],
        data: json[4]['data']
    }, {
        type: json[5]['type'],
        name: json[5]['name'],
        data: json[5]['data']
    }, {
        type: json[6]['type'],
        name: json[6]['name'],
        data: json[6]['data']
    }, {
        type: json[7]['type'],
        name: json[7]['name'],
        data: json[7]['data']

    },{
        type: json[8]['type'],
        name: json[8]['name'],
        data: json[8]['data']

    },{
        type: json[9]['type'],
        name: json[9]['name'],
        data: json[9]['data']

    }],

});
    })
        })

我已经像这样在fetch-data.php 中设置了图表类型

$date = array();
$date['name'] = 'Date';

$blank=array();
$blank['name'] = 'Blank';
$blank['type'] = 'column';

$direct=array();
$direct['name'] = 'Direct';
$direct['type'] = 'area';

$checked_in=array();
$checked_in['name'] = 'Checked In';
$checked_in['type'] = 'column';

$conf=array();
$conf['name'] = 'Conf';
$conf['type'] = 'column';

$gdf=array();
$gdf['name'] = 'GDF';
$gdf['type'] = 'column';

$gdp=array();
$gdp['name'] = 'GDP';
$gdp['type'] = 'column';

$gtn=array();
$gtn['name'] = 'GTN';
$gtn['type'] = 'column';

$prov=array();
$prov['name'] = 'PROV';
$prov['type'] = 'column';

$enquire=array();
$enquire['name'] = 'ENQUIRE';
$enquire['type'] = 'spline';