来自 JSON 数据的图表组合图

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的提醒。 我采用了此演示中给出的方法。 它更整洁，更干净，可用于根据需要添加任意数量的图表类型。 这是其他人的代码，他们想要制作一个组合图表，从数据库中获取数据。

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