Question

我正在阅读XML以将数据提供给Highcharts（以下是我的xml）。

尝试构建列图表和明细事件，以在单独的<div>中生成区域图表。它更容易硬编码值并绘制图表。但我不明白如何使用jquery执行它。

我很难将单个对象的name和y值推送到data。（对于柱形图）

任何人都可以告诉我如何传递Column Chart的值。谢谢你提前做好准备。

我的XML：

<chart>
    <categories>
        <browser>MSIE</browser>
        <browser>FF</browser>
    </categories>
    <ChartSeries>
          <series>
               <name>MSIE</name>
               <value>56</value>
                    <drilldown>
                    <date>
                        <item>01-Apr-16</item>
                        <item>02-Apr-16</item>
                        <item>03-Apr-16</item>
                    </date>
                     <data>
                        <point>13.52</point>
                        <point>5.43</point>
                        <point>1.58</point>
                     </data>
               </drilldown>
         </series>
         <series>
               <name>FF</name>
               <value>67</value>
                <drilldown>
                    <date>
                       <item>01-May-16</item>
                       <item>02-May-16</item>
                       <item>03-May-16</item>
                       <item>04-May-16</item>
                       </date>
                    <data>
                       <point>9.91</point>
                       <point>0.50</point>
                       <point>0.36</point>
                       <point>0.32</point>
                    </data>
               </drilldown>
          </series>
    </ChartSeries>
</chart>

我的代码：

var options={
    chart: {
                renderTo: 'container',
                type: 'bar'
            },
    xAxis: {
              categories : []
            },
    series : [{
                name:'Browsers',
                data:[]
            }],
   drilldown:{}
};
$.get(url, function(xml) {
    var $xml = $(xml);

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

    $xml.find('ChartSeries series').each(function(i, series) {
         var pointOptions = {
             name : $(series).find('name').text(),
             y: Number($(series).find('value').text()),
             drilldown: $(series).find('name').text()
          };
          options.series[0].data.push(pointOptions);  
    });
   var drilldown={
       series:[]
   };

   $xml.find('ChartSeries series').each(function(i, series) {
        var pointOptionsDrill = {
            id : $(series).find('name').text(),
            data:[] 
        };

      $(series).find('drilldown').each(function(i,point){
            pointOptionsDrill.data.push([$(series).find('date item').text(),Number($(series).find('data point').text())])
      });
      drilldown.series.push(pointOptionsDrill);  

});
    options.drilldown=drilldown;
    var chart = new Highcharts.Chart(options);

});

  <div id="container" style="width: 100%;  height:100%;"></div>

Answer 1

你把一个系列与一个点混淆了。你在<series>的xml文件中实际拥有的是一个应该被推送到数据数组的点。

所以你有一个名为'浏览器'的系列和2个名为'FF'和'MSIE'的系列属于类别（之前定义）。

$.get(url, function(xml) {
  var $xml = $(xml);

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

  $xml.find('ChartSeries series').each(function(i, series) {
    var pointOptions = {
        name : $(series).find('name').text(),
        y: Number($(series).find('value').text()),
        // drilldown: ... this should be defined drilldown optionally
    };

    options.series[0].data.push(pointOptions); //pushing point to the data, not to the series
  });

  var chart = new Highcharts.Chart(options);
});

 console.log(options.drilldown);

编辑：

将轴类型更改为类别，并且不明确定义类别，因此将根据点的名称动态创建类别。

    var options={
    chart: {
        renderTo: 'container',
        type: 'bar'
    },
    xAxis: {
      type: 'category'
  },
  series : [{
    name:'Browsers',
    data:[]
}]
};

var url = "http://utils.highcharts.local/takie/chart.xml"

$.get(url, function(xml) {
  var $xml = $(xml);

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

  $xml.find('ChartSeries series').each(function(i, series) {
   var pointOptions = {
     name : $(series).find('name').text(),
     y: Number($(series).find('value').text()),
     drilldown: $(series).find('name').text()
   };
   options.series[0].data.push(pointOptions);  
  });
  var drilldown={
   series:[]
  };

  $xml.find('ChartSeries series').each(function(i, series) {
    var pointOptionsDrill = {
        id : $(series).find('name').text(),
        data:[] 
    };

    $(series).find('drilldown').each(function(i,drilldownSeries){
     $(drilldownSeries).find('date item').each(function (i, item) {
        pointOptionsDrill.data.push([$(item).text()]);
    });

     $(drilldownSeries).find('data point').each(function (i, point) {
        pointOptionsDrill.data[i][1] = Number($(point).text());
    });

   });
    drilldown.series.push(pointOptionsDrill);  

  });
  options.drilldown=drilldown;
  var chart = new Highcharts.Chart(options, function () {
  });

});

Highcharts从XML生成柱形图

1 个答案: