Javascript 动态使用JSON中的多个系列的Highcharts

我正在从用户生成的JSON数据的HighCharts中制作一个条形图。JSON的格式如下：

[{"name":"project1","data":[50291,7410,2013,2013,524,201]},{"name":"project2","data":[1776995,758630,25633,4120054,24521,2045]}]

因为用户选择了项目，所以这个JSON数据也可以是5个项目中的一个！我需要能够动态加载到我的海图系列。这就是我现在拥有的代码

$(function () {

    var options = {
        chart: {
            renderTo: 'container',
            type: 'column',
            options3d: {
                enabled: true,
                alpha: 0,
                beta: 0,
                depth: 0,
                viewDistance: 25
            }
        },
        title: {
            text: 'Data'
        },
        subtitle: {
            text: 'Dataset'
        },
        plotOptions: {
            column: {
                depth: 0
            }
        },
        series: [],
        xAxis: {
            categories: ['XA', 'XB', 'XC', 'XD', 'XE', 'XF']
        },

        credits: {
            enabled: false
        }
    };
    $.getJSON('/uploads/test.json', function (list) {
        var newseries = {
            name: '',
            data: []
        };

        $.each(list, function (i, item) {
            newseries.name = item.name;
            newseries.data = item.data;
            options.series.push(newseries);
        });
        var chart = new Highcharts.Chart(options);


        function showValues() {
            $('#alpha-value').html(chart.options.chart.options3d.alpha);
            $('#beta-value').html(chart.options.chart.options3d.beta);
            $('#depth-value').html(chart.options.chart.options3d.depth);
        }

        // Activate the sliders
        $('#sliders input').on('input change', function () {
            chart.options.chart.options3d[this.id] = this.value;
            showValues();
            chart.redraw(false);
        });

        showValues();
    });
});

当我的图表中只有一个项目时，这种方法是有效的，但当有更多项目时，图表会以某种方式覆盖自己，并且只显示JSON中的最后一个项目。有人能帮我解决这个问题吗

请尝试以下操作：

$.each(list, function (i, item) {
   if(item.name!=undefined){
       options.series.push({
          name:item.name,
          data:item.data
       });
   }
});

请试试这个：

$.each(list, function (i, item) {
   if(item.name!=undefined){
       options.series.push({
          name:item.name,
          data:item.data
       });
   }
});

---

每次循环时，都会覆盖

newseries

对象的

名称

和

数据

节点，方法是以这种方式将它们声明在循环之外

我想把这个问题转过来：

$.getJSON('/uploads/test.json', function (list) {
    var newseries = {
        name: '',
        data: []
    };

    $.each(list, function (i, item) {
        newseries.name = item.name;
        newseries.data = item.data;
        options.series.push(newseries);
    });
    var chart = new Highcharts.Chart(options);

更像这样：

$.getJSON('/uploads/test.json', function (list) {
    var newseries;

    $.each(list, function (i, item) {
        newseries = {};
        newseries.name = item.name;
        newseries.data = item.data;
        options.series.push(newseries);
    });
    var chart = new Highcharts.Chart(options);

实际上，在您的情况下，您根本不需要循环，因为您的返回JSON已经是Highcharts的正确格式

你可以试试类似的东西

$.getJSON('/uploads/test.json', function (list) {
    options.series = list;
    var chart = new Highcharts.Chart(options);

---

相反（未测试，可能需要调整）。

每次循环时，您都会覆盖

newseries

对象的

名称和
数据
节点，方法是以这种方式将它们声明在循环之外

我想把这个问题转过来：

$.getJSON('/uploads/test.json', function (list) {
    var newseries = {
        name: '',
        data: []
    };

    $.each(list, function (i, item) {
        newseries.name = item.name;
        newseries.data = item.data;
        options.series.push(newseries);
    });
    var chart = new Highcharts.Chart(options);

更像这样：

$.getJSON('/uploads/test.json', function (list) {
    var newseries;

    $.each(list, function (i, item) {
        newseries = {};
        newseries.name = item.name;
        newseries.data = item.data;
        options.series.push(newseries);
    });
    var chart = new Highcharts.Chart(options);

实际上，在您的情况下，您根本不需要循环，因为您的返回JSON已经是Highcharts的正确格式

你可以试试类似的东西

$.getJSON('/uploads/test.json', function (list) {
    options.series = list;
    var chart = new Highcharts.Chart(options);

相反（未测试，可能需要调整）。
请在此行之前调用console.log（options.series）：var chart=new Highcharts.chart（options）并告诉我您收到了什么？我在图表初始化之前添加了代码。我的浏览器中没有显示任何消息，但当我启用chrome的inspect功能时，有一条消息说：“[Object，Object，Object]”当我选择三个项目时！我尝试了：window.alert（console.log（options.series））；这是未定义的！虽然在图表中显示了最后一个json数组的值。请在此行之前调用console.log（options.series）：var chart=new Highcharts.chart（options）并告诉我您收到了什么？我在图表初始化之前添加了代码。我的浏览器中没有显示任何消息，但当我启用chrome的inspect功能时，有一条消息说：“[Object，Object，Object]”当我选择三个项目时！我尝试了：window.alert（console.log（options.series））；这是未定义的！尽管在图表中，最后一个json数组的值仍会显示。。它可以工作！：-D.一件事，它加载选定的项目，但也是一个没有数据的“系列1”？我的JSON中没有定义这个“系列1”。Jibriggs的回答帮助了我！非常感谢你的帮助！令人惊叹的非常感谢你帮了我的忙！祝你过得愉快：-）它起作用了-D.一件事，它加载选定的项目，但也是一个没有数据的“系列1”？我的JSON中没有定义这个“系列1”。Jibriggs的回答帮助了我！非常感谢你的帮助！令人惊叹的非常感谢你帮了我的忙！祝你今天愉快：-）谢谢！最后一个建议有效。非常干净的代码：-）谢谢！最后一个建议有效。非常干净的代码：-）