使用高图在柱形图上生成折线图 [英] Generate a line chart over column chart using highcharts

问题描述

我的新Highcharts，我喜欢它。我想创建过柱的线图graph.but我让只有柱状图[链接] http://jsfiddle.net/sunman/S9ChJ/

但这里是我的问题是我无法在柱形图上创建线图。告诉我怎么可能。我已经搜索了这个，在那个代码中，我想要改变线图。所以请帮助我

I am new to Highcharts and i like it.I am trying to create a line graph over column graph.but i make only column graph [link]http://jsfiddle.net/sunman/S9ChJ/
But here is my problem is i could not create a line graph upon column chart .so please tell me how it is possible.i have already searched for this and in that code i want change for line graph. so please help me

在这里，这段代码我正在尝试。但不显示任何图表

Here this code i am trying .but not shows me any graph

    $(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

here is 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);

推荐答案

您需要添加额外的行系列。

You need to add extra line serie.

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/

这篇关于使用高图在柱形图上生成折线图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！