Question

我正在尝试生成highcharts的双轴，线和柱形图。我已经尝试过stackoverflows sugesstions但我找不到合适的解决方案。我已经正确地格式化了数据但是图表没有生成显示空白。我想要这种类型的[link] http://jsfiddle.net/sunman/dwyNz/8/。在样条线中我想显示＆＃39; bsp值＆＃39;在列中我想显示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代码中有问题，这就是为什么我无法获取graph.i数据在我的控制台中检查没有错误。但我调试此代码并且json结果显示我（json o / p在jsfiddle中写入）但图形不出现在浏览器中。我在jsfiddle中解释[link] jsfiddle.net/sunman/rDYvt/9请检查一下。给我解决方案我错了。所以请帮助我并解决我的疑问。

Answer 1

在你的 $。getJSON（＆＃34; combochart.php＆＃34;，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);

Answer 2

好的，它现在正在运作......

将其粘贴到JSFiddle中以使其正常工作......

$(document).ready(function() {
        var json= '[{"name":"Project","data":["Green View","Grand","Arete","Canary Greens","Terra","Beethovens","Ninex City","South Park","Callidora","Lotus","Coban","NCR Green","Kocoon","Estella","NCR One"]},{"name":"Facilities Rating","data":[45,55,55,55,55,55,55,55,55,55,55,55,55,55,55]},{"name":"BSP VALUES","data":[97500,55745,16400,98700,38600,12090,94700,11400,12450,89500,86725,88335,54200,18200,30400]}]'

        var jsobj = JSON.parse(json)
        var firstSeriesData = [];
        var secondSeriesData = [];
        jsobj[1].data.forEach(function(seriesOneData){
            firstSeriesData.push(seriesOneData);  
        })

        jsobj[2].data.forEach(function(seriesTwoData){
            secondSeriesData.push(seriesTwoData);
        })

        $('#container').highcharts({
        chart: {
            zoomType: 'xy',
            type: 'column',
            marginRight: 130,
            marginBottom: 50
        },
        title: {
            text: 'Top 12 Projects Facilities Rating and BSP Costs ',
            x: -20 //center
        },
        subtitle: {
            text: '',
            x: -20
        },
        xAxis: {
            categories: jsobj[0].data
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Facilities Rating'
            },
            plotLines: [{
                value: 0,
                width:1,
                color: '#808080'
            }]
        },
        tooltip: {
            formatter: function() {
                return '<b>'+ this.series.name +'</b><br/>'+
                this.x +': '+ this.y;
            }
        },
        plotOptions:{
            column: {
                stacking: 'normal',
                dataLabels: {
                    enabled: true,
                    color:'white'
                }
            }
       },
       legend: {
           layout: 'vertical',
           align: 'right',
           verticalAlign: 'top',
           borderWidth: 0,
           x: -10,
           y:110
       },
       series: [ {
           name:'Facilities Rating',
           data:firstSeriesData, 
           id:'dataseries' 
       },{
           name:'BSP',
           type:'spline',
           data:secondSeriesData
        }]
    })
});

一对评论..你的JSON中有一个身份不明的角色。这是我粘贴你的JSON字符串所得到的。

enter image description here

请注意JSON中间的红点。

另外，请确保按此顺序加载高级图表模块...

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

最后，你有两个系列，但其中一个的值低于100，另一个的值超过100k。所以第一个系列不会显示，因为它与第二个相比几乎为0。你必须要做点什么。

Answer 3

在您的函数$.getJSON("combochart.php", function(json)中，您需要明确定义所需的options。您也没有真正设置任何数据。我假设json[0]['data']是一个类别列表，例如['Cat1', 'Cat2',...]，json[1]和json[2]包含[val1, val2, ...]等数据。如果是这样，你需要做这样的事情：

 $.getJSON("combochart.php", function(json) {
      var theChart = $('#container').highcharts();
      theChart.xAxis[0].setCategories(json[0]['data']);  /*error here: ReferenceError: options is not defined */
        theChart.series[0].setData(json[1]);
        theChart.series[1].setData(json[2]);

        //chart = new Highcharts.Chart(options);

    });
});

双轴，直线和柱形图中的HighCharts问题

3 个答案: