Javascript 将jQuery XML对象解析为Highcharts

我是新来的，是一个JavaScript初学者，所以请容忍我

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

只需单击“创建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>

到目前为止还不错。我正在为如何构建这个系列而挣扎。这是我目前拥有的（第4列应为系列标签，第10列为每个系列和每个周期的绘制量）：

这显然是错误的，因为我只是在搜索xml对象中的每一行。因此，我的图表显示了30多个系列，所有系列都在01-12期间显示。我只是不确定如何写，这样我就可以得到第4列（例如“CEO”和“美国运营”）每个时期的每个不同值的曲线图，例如第6列（01-12、02-12等）

---

我希望这是有意义的，并为冗长的帖子道歉。我不希望有人为我编写代码，但如果有语法线索或建议或其他任何东西，我将不胜感激。

您的代码中有几个问题；我在下面的评论中提到了次要问题。主要问题是，您正在为

每个

回调中的每个点添加一个新系列

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

$('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);
});

---

您的代码中有几个问题；我在下面的评论中提到了次要问题。主要问题是，您正在为

每个

回调中的每个点添加一个新系列

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

$('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);
});

---

看起来如果你能够将xml转换为json，你就可以创建你的系列。你看到这个链接了吗？谢谢Mina的链接-我现在正在阅读它…看起来如果你能够将xml转换为json，你就可以创建你的系列。你看到这个链接了吗？谢谢Mina的链接-我现在正在阅读它…谢谢！！！我需要一段时间来消化这一点，但我非常感激。我还在学习，所以这是一个巨大的帮助。非常感谢。非常感谢。我需要一段时间来消化这一点，但我非常感激。我还在学习，所以这是一个巨大的帮助。非常感谢。

$('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);
});