Question

我是Highcharts的新手，我喜欢它。我正在尝试在列图上创建折线图。但我只创建了列图[link] http://jsfiddle.net/sunman/S9ChJ/
但这是我的问题是我无法在柱形图上创建线图。所以请告诉我它是如何可能的。我已经搜索过这个并且在那段代码中我想要改变线图。所以请帮帮我

这是我正在尝试的代码。但是没有向我显示任何图表

    $(function () {
        var chart;
        $(document).ready(function() {
    $('#container').highcharts({
        chart: {
            zoomType: 'xy'
        },
        title: {
            text: 'Project faclityv Rating'
        },
        subtitle: {
            text: 'testing'
        },
        xAxis: [{
            categories: [A,B,C,D,E]
        }],
        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: [10,15,20,25,30],
            tooltip: {
                valueSuffix: ' out of 100'
            }

        }, {
            name: 'Bsp Cost',
            type: 'spline',
            data: [5,10,15,20,25],
            tooltip: {
                valueSuffix: 'Rs.'
            }
        }]
    });

     $.getJSON("data.php", function(json) {

            options.xAxis.categories = json[0]['data'];
            options.series[0].data = json[1]['data'];
                   options.series[1].data = json[1]['data'];


            chart = new Highcharts.Chart(options);

        });
     });

   });

这里是data.php

       $query = mysql_query("SELECT projects_detail.Project_name,facility_rating.facilities_total,cost.bsp 
  FROM projects_detail LEFT OUTER JOIN facility_rating 
    ON projects_detail.project_id= facility_rating.project_id 
 LEFT OUTER JOIN cost ON facility_rating.project_id = cost.project_id");

       $category = array();
       $category['name'] = 'Project';
     $series1 = array();
       $series1['name'] = 'Facilities Rating';
       $series2 = array();
     $series2['name'] = 'BSP values';

   while($r = mysql_fetch_array($query)) {
   $category['data'][] = $r['Project_name'];
   $series1['data'][] = $r['facilities_total'];
   $series2['data'][] = $r['bsp'];

    }
      $result = array();

     array_push($result,$category);
      array_push($result,$series1);
      array_push($result,$series2);
        print json_encode($result, JSON_NUMERIC_CHECK);

Answer 1

你需要添加额外的系列。

json = [{
    data: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l']
}, {
    data: [1, 2, 3, 1, 2, 3, 4, 1, 3, 3, 3, 3, 3, 3, 5, 1]
}];
options.xAxis.categories = json[0]['data'];
options.series[0].data = json[1]['data'];
options.series[1].data = json[1]['data'];

http://jsfiddle.net/S9ChJ/1/

使用highcharts在柱形图上生成折线图

1 个答案: