问题描述
我正在尝试生成双轴，高位图的行和列图表。我尝试了stackoverflows sugesstions，但我找不到合适的解决方案。我的数据格式正确，但图表不生成显示空白。我想这类[link] 在样条线中，我想显示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问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！