2

我想使用 Highcharts 插件和 XML 文件中的数据创建一个图形“堆叠列”。（见这里）我的 XML 文件是：

<?xml version="1.0" encoding="utf-8"?>
<chart>
<categories>
<item>2000</item>
<item>2001</item>
<item>2002</item>
....    </categories>
<series>
<name>Impots locaux</name>
<data>
<point>231</point>
<point>232</point>
....    </data>
</series>
<series>
<name>Autres impots et taxes</name>
<data>
<point>24</point>
<point>27</point>
<point>37</point>
.....</data>
</series>
<series>
<name>Dotation globale de fonctionnement</name>
<data>
<point>247</point>
<point>254</point>
....</data>
</series>
</chart>

HTML编码是：

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


        var options = {
            chart: {
                renderTo: 'container',
                type: 'column'
            },
            title: {
                text: 'Produits de fonctionnement du Mazet-Saint-Voy'
            },
              subtitle: {
            text: 'Source : <a href="http://alize22.finances.gouv.fr/communes/eneuro/RDep.php?type=BPS&dep=043" target="_blank">Ministère de l\'économie et des finances</a>'
        },
        tooltip: {
            formatter: function () {
                return '' + this.y +  ' €/hab. en ' +  this.x;
            }
        },

        plotOptions: {
            column: {
               /* pointPadding: 0.2,
                borderWidth: 0,*/
                   stacking: 'normal',
                dataLabels: {
                    enabled: true,
                    color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
                }
            }
        },
            xAxis: {
                categories: [],
                   labels: {
                rotation: -45,
                align: 'right',
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }

            },
            yAxis: {
                title: {
                    text: 'En euros par habitant'
                },
            stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                }
            }
        },
            series: []
        };

        // Load the data from the XML file 
        $.get('../xml/43130.xml', function(xml) {

            // Split the lines
            var $xml = $(xml);

            // push categories
            $xml.find('categories item').each(function(i, category) {
                options.xAxis.categories.push($(category).text());
            });

            // push series
            $xml.find('series').each(function(i, series) {
                var seriesOptions = {
                    name: $(series).find('name').text(),
                    data: []
                };

                // push data points
                $(series).find('data point').each(function(i, point) {
                    seriesOptions.data.push(
                        parseInt($(point).text())
                    );
                });

                // add it to the options
                options.series.push(seriesOptions);
            });
            var chart = new Highcharts.Chart(options);
        });


    });
    </script>

</head>
<body>

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


</body>
</html>

我的 3 系列数据的“dataLabels”代码在哪里以及如何垂直？

dataLabels: {
                enabled: true,
                rotation: -90,
                color: '#FFFFFF',
                align: 'right',
                x: 4,
                y: 10,
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }

谢谢。

4

1 回答 1

1

您可以设置rotation为90. 演示

或者您可以使用 css 设置和设置样式useHTML。true

.highcharts-data-labels span {
    width: 7px;
    white-space: normal !Important;
}

那么你的dataLabels格式化程序应该是：

formatter: function() {
    return this.y.toString().split('').join(' ');
}

这样，您将通过以下方式获得标签。

9
0
0

演示

于 2013-01-29T17:06:03.230 回答