Question

我使用Highcharts来构建BoxPlot http://www.highcharts.com/。此图表的数据来自具有以下结构的XML文档

<spex>
<NAME>A</NAME>
<PPP>0.997</PPP>
<QQQ>0.600</QQQ>
.......</spex>

现在我使用xml to json jquery插件从xml文件中获取数据数组。根据指令here，我使用以下代码转换数据 $.get('include/Yspark/spark.xml', function(xml){ var boxvalues = $.xml2json(xml);

当我使用boxvlaues观看firebug返回的数组时，我得到了以下数组

NAME    ["A", "B", "C", 2 more...]
PPP ["0.997", "0.450", "0.230", 2 more...]
QQQ ["0.600", "0.441", "0.994", 2 more...]

但是当我尝试在图表数据数组中设置此数组时，数据部分中没有显示任何内容（主

然而，x轴上的NAME被瞄准了第一个胡须，而不是[A,B,C,D]而不是

代表四个胡须。

这就是我所做的

`$.get('include/Yspark/spark.xml', 
function(xml){ 
var boxvalues = $.xml2json(xml); 

$(function () {
    $('#container').highcharts({

        chart: {
            type: 'boxplot'
        },

        title: {
            text: 'Highcharts Box Plot Example'
        },

        legend: {
            enabled: false
        },

        xAxis: {
            categories: [boxvalues.NAME],
            title: {
                text: 'Experiment No.'
            }
        },

        yAxis: {
            title: {
                text: 'Observations'
            }  
        },

        series: [{
            name: 'Observations',
            data: [boxvalues.PPP,boxvalues.QQQ,boxvalues.RRR,boxvalues.SSS,boxvalues.TTT],
            tooltip: {
                headerFormat: '<em>Experiment No {point.key}</em><br/>'
            }
        }, ]


});
});
  });`

Answer 1

值PPP ["0.997", "0.450", "0.230", 2 more...]周围的双引号可能导致问题。尝试使用JSON.parse这样的东西（我没有测试但这应该有用）

$.get('include/Yspark/spark.xml', 
function(xml){ 
var boxvalues = $.xml2json(xml); 

$(function () {
    $('#container').highcharts({

        chart: {
            type: 'boxplot'
        },

        title: {
            text: 'Highcharts Box Plot Example'
        },

        legend: {
            enabled: false
        },

        xAxis: {
            categories: boxvalues.NAME,
            title: {
                text: 'Experiment No.'
            }
        },

        yAxis: {
            title: {
                text: 'Observations'
            }  
        },

        series: [{
            name: 'Observations',
            data: [


               JSON.parse("["+boxvalues.PPP+"]"),
                JSON.parse("["+boxvalues.QQQ+"]"),
                JSON.parse("["+boxvalues.RRR+"]"),
                JSON.parse("["+boxvalues.SSS+"]"),
              JSON.parse("["+boxvalues.TTT+"]")
            ],
            tooltip: {
                headerFormat: '<em>Experiment No {point.key}</em><br/>'
            }
        }, ]


});
});
  });

另请注意，我已从[]移除了boxvalues.NAME，因为这可能导致类别排列为单个值

使用JQuery从XML获取数据以更新Highchart

1 个答案: