1

我是新来的 JavaScript 初学者，所以请多多包涵。

我正在尝试根据 jQuery xml 对象中的一些数据绘制一个 highcharts 图表。实际数据来自 SOAP 请求，但出于我的小提琴的目的，我现在只是将其粘贴到文本变量中。

我的 jsfiddle 示例

只需单击“创建 HTML 表格和绘图”按钮并向下滚动即可查看图表。

我的 xml 数据示例如下：

<rowset>
<Row>
    <Column0>0</Column0>
    <Column1>101</Column1>
    <Column2>US 1 LE 1 BU 1</Column2>
    <Column3>110</Column3>
    <Column4>CEO</Column4>
    <Column5>Ledger USA PL</Column5>
    <Column6>01-12</Column6>
    <Column7>2012</Column7>
    <Column8>20120101</Column8>
    <Column10>240481</Column10>
</Row>
<Row>
    <Column0>0</Column0>
    <Column1>101</Column1>
    <Column2>US 1 LE 1 BU 1</Column2>
    <Column3>121</Column3>
    <Column4>US Operations</Column4>
    <Column5>Ledger USA PL</Column5>
    <Column6>01-12</Column6>
    <Column7>2012</Column7>
    <Column8>20120101</Column8>
    <Column9>0</Column9>
    <Column10>2026166</Column10>
</Row>

我可以创建 x 轴类别，在图表 x 轴中显示会计期间（第 6 列）为 01-12、02-12 等：

var cats = [];    
$($xml).find("Row").each(function () {
var column = $(this).find("Column6").text();
        if ($.inArray(column, cats)===-1)
cats.push(column);
    options.xAxis.categories = cats;
});

到目前为止，一切都很好。我正在为如何构建这个系列而苦苦挣扎。这是我目前所拥有的（Column4 应该是系列标签，Column10 是要为每个系列和每个时期绘制的数量）：

  $($xml).find("Row").each(function(i, series) {
    var seriesOptions = {
        name: $(series).find("Column4").text(),
        data: []
    };

    $(series).find('Column10').each(function(i, point) {
        seriesOptions.data.push(
        parseInt($(point).text())

        );
    });

    // add it to the options
    options.series.push(seriesOptions);
});

这显然是错误的，因为我只是在搜索 xml 对象中的每一行。结果，我的图表显示了 30 多个系列，全部显示在 01-12 期间。我只是不确定如何写这个，以便为每个时期的第 4 列（例如“CEO”和“美国运营”）的每个不同值绘制图表，例如第 6 列（01-12、02-12 等） .

我希望这是有道理的，并为长篇大论道歉。我不希望任何人为我编写代码，但任何语法线索或建议或任何将不胜感激的东西。

4

1 回答 1

1

您的代码中有几个问题；我用下面的评论解决了未成年人。主要问题是您正在为each回调中的每个点添加一个新系列。

相反，您可以创建一个系列名称映射到数据点数组，并在您遍历 XML 时添加到该映射。处理完 XML 后，将数据添加到系列配置对象。

工作演示

$('input[type=button]').click(function plotChart() {
    var cats = [], //x-axis categories
        seriesDataMap = {}; //map of series name to data

    //$xml is already a jQuery object, no need to re-wrap it
    //also, combine all processing into a single each callback, this will be faster
    $xml.find("Row").each(function () {
        var $row = $(this),
            category = $row.find("Column6").text(),
            seriesName = $row.find("Column4").text(),
            dataValue = parseInt($row.find('Column10').text(), 10);

        //get distinct values from Column 6 (Accounting Period):
        if ($.inArray(category, cats) === -1) {
            cats.push(category);
        }

        if (seriesDataMap[seriesName] === undefined) {
            //if we haven't seen this series before, add an empty array to our map
            seriesDataMap[seriesName] = [];
        }
        //add this data point for this series to our map
        seriesDataMap[seriesName].push(dataValue)
    });

    //add categories
    options.xAxis.categories = cats;

    //add series data
    for(var seriesName in seriesDataMap) {
        options.series.push({
            name: seriesName ,
            data: seriesDataMap[seriesName]
        });
    }

    //plot chart, no need to wrap in a $(function(){...}); callback since this is already in a click hanlder
    $('#container').highcharts(options);
});
于 2013-09-03T19:47:26.563 回答