Question

我从我从mysql中检索到的数据创建了一个柱形图。数据是两个系列的数据。图表正在运作。 但是在生成的图表中，我想为系列提供一个不同的pointWidth。

用于检索Mysql数据的PHP脚本：

 <?php
$con = mysql_connect("localhost","xxxx","xxxx");
if (!$con) {
  die('Could not connect: ' . mysql_error());
}
mysql_select_db("pvdag", $con);
$query = mysql_query("SELECT maand, OpbrengstPV, OpbrengstTheor FROM maandgegevens where YEAR(periode) = 2013");
$category = array();
$category['name'] = 'maand';
$series1 = array();
$series1['name'] = 'OpbrengstPV';
$series2 = array();
$series2['name'] = 'OpbrengstTheor';
while($r = mysql_fetch_array($query)) {
    $category['data'][] = $r['maand'];
    $series1['data'][] = $r['OpbrengstPV'];
    $series2['data'][] = $r['OpbrengstTheor'];   
}
$result = array();
array_push($result,$category);
array_push($result,$series1);
array_push($result,$series2);
print json_encode($result, JSON_NUMERIC_CHECK);
mysql_close($con);
?>

生成图表的脚本：

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>maandopbrengsten</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function() {

            // First, let's make the colors transparent
        Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function (color) {
            return Highcharts.Color(color)
                .setOpacity(0.5)
                .get('rgba');
        });     
            var options = {
                chart: {
                    renderTo: 'container',
                    type: 'column',
                    marginRight: 130,
                    marginBottom: 70
                },
                title: {
                    text: 'maandopbrengsten 2013',
                    x: -20 //center
                },
                subtitle: {
                    text: '',
                    x: -20
                },
                xAxis: {
                    categories: []
                },   
                yAxis: {
                    title: {
                        text: 'opbrengst kWh'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    formatter: function() {
                            return '<b>'+ this.series.name +'</b><br/>'+
                            this.x +': '+ this.y;
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'top',
                    verticalAlign: 'top',
                    x: 100,
                    y: 0,
                    borderWidth: 3
                },
                 plotOptions: {
                    column: {                       
                        dataLabels: {
                            enabled: true,
                            color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
                        },                      
                        grouping: false,
                            shadow: false
                    }
                    },
                series: []
            }

            $.getJSON("data.php", function(json) {
                options.xAxis.categories = json[0]['data'];
                options.series[0] = json[1];
                options.series[1] = json[2];            
                chart = new Highcharts.Chart(options);
            });
        });
        </script>
        <script src="http://code.highcharts.com/highcharts.js"></script>
        <script src="http://code.highcharts.com/modules/exporting.js"></script>
    </head>
    <body>
        <div id="container" style="min-width: 400px; width: 75%; height: 400px; margin: 0 auto"></div>
    </body>
</html>

Answer 1

您可以在特定系列上设置pointWidth，而不是在plotOptions中设置，例如：

 series: [{
        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

    }, {
        pointWidth: 50,
        data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]

    }]

http://jsfiddle.net/bwbF7/1/

柱形图中系列的不同pointWidths

1 个答案: