mysql - 双轴、折线图和柱形图中的 HighCharts 问题

Question

我正在尝试生成 highcharts 的双轴、折线图和柱形图。我尝试了 stackoverflows 的建议，但我找不到合适的解决方案。我的数据格式正确，但图表未生成显示空白。我想要这种类型的 [链接] http://jsfiddle.net/sunman/dwyNz/8/ .在样条线中，我想显示“bsp 值”，在列中，我想显示 facilities_total。所以在下面我展示了这个图表的代码。我还在 index.php 中指出了我的错误。

这是我的 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);

        });
    });

这是我的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);

我认为我在 json 代码中有问题，这就是为什么我无法为图形获取数据。我在我的控制台中检查没有错误。但是我调试了这段代码，json 结果显示了我(json o/p 在 jsfiddle 中写入)但是图形未出现在浏览器中。我在 jsfiddle[链接] jsfiddle.net/sunman/rDYvt/9 中进行了解释，请检查一下。在我错的地方给我解决方案。所以请帮助我并解决我的查询。

Answer 1

在你的 $.getJSON("combochart.php", function(json) 你需要像这样设置数据

     theChart.xAxis[0].setCategories(json[0]['data']); 
     theChart.series[0].setData(json[1]['data'], false);
     theChart.series[1].setData(json[2]['data'], true);