来自JSON数据的高级图表组合图
来自JSON数据的高级图表组合图
提问于 2018-04-16 19:21:49
我正在创建一个从数据库中获取数据的组合图表。我能够导入所有数据并将其呈现为单一类型，即列。有一个系列，但我想渲染样条类型。我所遵循的教程只教在一个单一类型的渲染，所以我有点迷失在这里。
这是我的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中的数据绘制为样条，而不是以列类型绘制的其他样条。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-04-17 07:54:12
谢谢@Jo o Menighin的提醒。我采用了这个演示中给出的方法。它更整洁，更干净，可以根据需要添加更多的图表类型。这是其他人的代码，他们想要制作一个从数据库中获取数据的组合图表。
$(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';Stack Overflow用户
发布于 2018-04-16 20:19:01
高图表演示有各种使用高级图表的演示。其中一个演示了如何在相同的图表中绘制不同类型的系列：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'
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49864784
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号