Question

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

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

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

$(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中的最后一个项目。有人可以帮我解决这个问题吗？

Answer 1

请试试这个：

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

Answer 2

每次循环时，您都会覆盖targetSdkVersion对象的FileUriExposedException和StrictMode个节点，方法是以这种方式将它们声明为循环之外。

我会转过身来：

name

更像这样的事情：

data

尽管如此，在您的情况下，您根本不需要循环，因为您的返回JSON已经采用了适当的Highcharts格式。

您可以尝试类似

的内容

newseries

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

具有JSON动态多个系列的Highcharts

2 个答案: