0

クライアント側では、xsl.i を使用しています。xlst.i から円グラフを埋めたいと思っています。サーバー側から xml ファイルを取得します。

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

パイチャートのデータを動的に入力するにはどうすればよいですか?以下のコードを試してみましたが、うまくいきません.

  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);
         });
4

2 に答える 2

0

このコードは機能します。もっとわかりやすいと思います

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


                ]
            }]
        });
    });
于 2013-06-25T12:24:32.727 に答える