Question

客户方面，我们正在使用xsl.i想要从服务器端获取xlst.i中的饼图获取xml文件，如：

var services="<xsl:value-of  disable-output-escaping="yes" select="/doc/serviceHistory/usageList"/>";

我怎样才能动态填充饼图的数据。我已尝试过以下代码，但它不起作用。$（document）.ready（function（）{

  var options = {
            chart: {renderTo: 'container',type: 'pie',width: 334,height: 230},
            title: {text: ''},
                                tooltip: {pointFormat: '{series.name}: <b>{point.percentage}%</b>',percentageDecimals: 0},
                                plotOptions: {
                                        pie: {
                                                allowPointSelect: true,
                                                cursor: 'pointer',
                                                dataLabels: {
                                                enabled: true,
                                                color: '#000000',
                                                connectorColor: '#000000',
                                                formatter: function() {
                                                                return '<b>'+ this.point.name +'</b> ';
                                                }
                                                }
                                              }
                                },
            series: [{name: 'Allowed',
                                             data:[]
                                         }]
         };
         $.get('doc.xml', function(xml) {
            var $xml = $(xml);



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


               $xml.find('doc serviceHistory usageList usage usageType').each(function(i, category) {
                  name[i] = $(category).text();
               });

               $(series).find('doc serviceHistory usageList usage percentage').each(function(i, point) {
                  seriesOptions.data.push([name[i],parseInt($(point).text())]);
               });
               options.series.push(seriesOptions);
            });
            var chart = new Highcharts.Chart(options);
         });

Answer 1

你能展示一下你的XML的例子吗？或者设置jsFiddle示例？通常，您的数据不应包含任何NaN或字符串。此外，您在这里设置一个系列：

        series: [{
           name: 'Allowed',
           data:[]
        }]

然后再添加一个：

        options.series.push(seriesOptions);

所以你要覆盖另一个系列。

Answer 2

此代码有效。我认为它更简单

 $(function () {
        $('#container').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: "<xsl:value-of select="percentage"></xsl:value-of>"
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage}%</b>',
                percentageDecimals: 1
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        color: '#000000',
                        connectorColor: '#000000',
                        formatter: function() {
                            return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                        }
                    }
                }
            },
            series: [{
                type: 'pie',
                name: 'Browser share',
                data: [

                     <xsl:for-each select="/a/b/c/d">
                        <xsl:variable name="totalCost">
                              <xsl:value-of select="e"></xsl:value-of>
                        </xsl:variable>

                        <xsl:if test="$totalCost!=0">
                          ["<xsl:value-of select="usageType"></xsl:value-of>",  <xsl:value-of select="$totalCost"></xsl:value-of> ],                    
                        </xsl:if>
                    </xsl:for-each>


                ]
            }]
        });
    });

高图 - 使用xslt填充饼图数据

2 个答案: