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

Question

客户端，我们正在使用 xsl。我想从 xlst 填充饼图。我从服务器端获取 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>


                ]
            }]
        });
    });