双轴,线条和柱状图中的HighCharts问题 [英] HighCharts issues in Dual axes, line and column charts
问题描述
我正在尝试生成双轴,高位图的行和列图表。我尝试了stackoverflows sugesstions,但我找不到合适的解决方案。我的数据格式正确,但图表不生成显示空白。我想这类[link] http://jsfiddle.net/sunman/dwyNz/8/ 在样条线中,我想显示bsp值,并在列中显示facilities_total。所以下面我显示我的代码这个graph.I也指出我的错误在index.php。
这是我的 Index.php
$(function(){
$('#container')。highcharts({
chart:{
zoomType:'xy'
},
title:{
text:'Project faclityv Rating'
},
副标题:{
text:'testing'
},
xAxis:[{
categories:[]
}],
yAxis:[{// Primary yAxis
标签:{
//格式:'{value}卢比',
风格:{
颜色:Highcharts.getOptions()。colors [1]
}
},
title:{
text:'Bsp Cost',
style:{
color:Highcharts.getOptions()。colors [1]
}
}
},{// Secondary yAxis
title:{
text:'facility rating',
style:{
color:Highcharts.getOptions()。colors [0]
}
},
标签:{
//格式:'{value} out of 100',
style:{
color :Highcharts.getOptions()。colors [0]
}
},
相反:true
}],
tooltip:{
shared:true
},
legend:{
layout:'vertical',
align:'left',
x:120,
verticalAlign:'top',
y:100,
floating:true,
backgroundColor :( Highcharts.theme&& Highcharts.theme.legendBackgroundColor)|| '#FFFFFF'
},
系列:[{
name:'Facility Rating',
type:'column',
yAxis:1,
data:[],
tooltip:{
valueSuffix:'out of 100'
}
},{
name:'Bsp Cost' ,
type:'spline',
data:[],
tooltip:{
valueSuffix:'Rs。'
}
}]
});
$ b $ .getJSON(combochart.php,function(json){
options.xAxis.categories = json [0] ['data']; / * error here:ReferenceError:options is not defined * /
options.series [0] = json [1];
options.series [1] = json [2];
chart = new Highcharts.Chart(options);
});
});
这是我的 combochart.php
$ query1 = mysql_query(SELECT projects_detail.Project_name,superfac_rating.faci_total
FROM projects_detail LEFT OUTER JOIN superfac_rating
ON projects_detail.project_id = superfac_rating .project_id);
$ category = array();
$ category ['name'] ='项目';
while($ row1 = mysql_fetch_array($ query1)){
$ category ['data'] [] = $ row1 ['Project_name'];
$ series1 ['data'] [] = $ row1 ['faci_total'];
$ query2 = mysql_query(SELECT projects_detail.Project_name,superfac_rating.faci_total
FROM projects_detail LEFT OUTER JOIN superfac_rating
ON projects_detail.project_id = superfac_rating.project_id
LEFT OUTER JOIN成本ON gsuperfac_rating.project_id = cost.project_id);
$ series1 = array();
$ series1 ['name'] ='项目名称';
$ series2 = array();
$ series2 ['name'] ='BSP VALUES';
while($ row2 = mysql_fetch_array($ query2)){
$ series1 ['data'] [] = $ row2 ['faci_total'];
$ series2 ['data'] [] = $ row2 ['bsp'];
}
$ result = array();
array_push($ result,$ category);
array_push($ result,$ series1);
array_push($ result,$ series1);
array_push($ result,$ series2);
打印json_encode($ result,JSON_NUMERIC_CHECK);
我认为我在json代码中存在问题,这就是为什么我无法获取graph.i数据在我的控制台没有errors.but我调试此代码和json结果显示我(json o / p在jsfiddle中写入),但图形不显示在浏览器中。我在jsfiddle中解释[link] jsfiddle.net/sunman/rDYvt/9请检查这一点。给我解决方案,我错了。所以请帮助我,并解决我的查询。 $。getJSON (combochart.php,function(json)),你需要setData像这样
theChart.xAxis [0 ] .setCategories(json [0] ['data']);
theChart.series [0] .setData(json [1] ['data'],false);
theChart.series [1 ] .setData(json [2] ['data'],true);
I am trying to generate Dual axes, line and column charts of highcharts .I have tried stackoverflows sugesstions but i couldn't find proper solution.I have the data formatted properly but yet the chart is not generate shows blank.I want this type of [link] http://jsfiddle.net/sunman/dwyNz/8/ .In spline line I want to show 'bsp values' and in column I want to show facilities_total. So below i show my code for this graph.I also pointed my error in index.php.
Here is my Index.php
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Project faclityv Rating'
},
subtitle: {
text: 'testing'
},
xAxis: [{
categories: []
}],
yAxis: [{ // Primary yAxis
labels: {
// format: '{value} Rs.',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Bsp Cost',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'facility rating',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
//format: '{value} out of 100',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 100,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [{
name: 'Facility Rating',
type: 'column',
yAxis: 1,
data: [],
tooltip: {
valueSuffix: ' out of 100'
}
}, {
name: 'Bsp Cost',
type: 'spline',
data: [],
tooltip: {
valueSuffix: 'Rs.'
}
}]
});
$.getJSON("combochart.php", function(json) {
options.xAxis.categories = json[0]['data']; /*error here: ReferenceError: options is not defined */
options.series[0] = json[1];
options.series[1] = json[2];
chart = new Highcharts.Chart(options);
});
});
Here is my combochart.php
$query1 = mysql_query("SELECT projects_detail.Project_name,superfac_rating.faci_total
FROM projects_detail LEFT OUTER JOIN superfac_rating
ON projects_detail.project_id= superfac_rating.project_id ");
$category = array();
$category['name'] = 'Project';
while($row1 = mysql_fetch_array($query1)) {
$category['data'][] = $row1['Project_name'];
$series1['data'][] = $row1['faci_total'];
}
$query2 = mysql_query("SELECT projects_detail.Project_name,superfac_rating.faci_total
FROM projects_detail LEFT OUTER JOIN superfac_rating
ON projects_detail.project_id= superfac_rating.project_id
LEFT OUTER JOIN cost ON gsuperfac_rating.project_id=cost.project_id ");
$series1 = array();
$series1['name'] = 'Project Name';
$series2 = array();
$series2['name'] = 'BSP VALUES';
while($row2 = mysql_fetch_array($query2)) {
$series1['data'][] = $row2['faci_total'];
$series2['data'][] = $row2['bsp'];
}
$result = array();
array_push($result,$category);
array_push($result,$series1);
array_push($result,$series1);
array_push($result,$series2);
print json_encode($result, JSON_NUMERIC_CHECK);
I think i have problem in json code thats why i can't fetch data for graph.i checked in my console no errors.but i debug this code and json result shows me(json o/p writes in jsfiddle) but graph not appear in browser. i am explained in jsfiddle[link] jsfiddle.net/sunman/rDYvt/9 please check this. give me solution where i am wrong.So please help me and resolve my query.
Inside your $.getJSON("combochart.php", function(json) you need to setData like this
theChart.xAxis[0].setCategories(json[0]['data']);
theChart.series[0].setData(json[1]['data'], false);
theChart.series[1].setData(json[2]['data'], true);
这篇关于双轴,线条和柱状图中的HighCharts问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!