Question

[对不起我的英文] 我是JS的新手，我找到了一个我一周都无法解决的问题。

我想显示一个图表（使用带有JSON的PHP文件中的数据），其中包含两个系列维度：第一个是使用的技术（总共5个），另一个是导出或导入。

因此，当用户在页面上时，他可以选择显示技术，如导出，导入或两者。首先，要在导出中加入一个相同的技术导入，我使用了＆＃34; linkedto = previous＆＃34;，结果是每个技术的图例中的单个项目。

但我想在图例中添加两个项目：＆＃34;导入＆＃34;和＆＃34;导出＆＃34;，有0个数据，允许显示或不显示导入或导出。

我已经使用过此代码，但我无法找到如何显示导入，导出，两者或任何内容的选择。

非常感谢你花点时间阅读我的帖子。 BR

$(function () {

     var chart;
     $(document).ready(function() {


    var options = {
         chart: {
        renderTo: 'euro',
            type: 'column'
        },

        title: {
            text: 'Vision en euro'
        },

        xAxis: {
            categories: []
        },

        yAxis: {

            title: {
                text: 'k€'
            },

            stackLabels: {
                enabled: true,
                rotation: 30,
            }
        },

         tooltip: {
            headerFormat: '{point.x}<b></b><br/>',

        },

          plotOptions: {
            column: {
                stacking: 'normal',
                dataLabels: {
                    enabled: false,
                },

                }
            },





        series: []
        };




        Highcharts.setOptions(Highcharts.theme);
      $.getJSON('SOURCE.php', function(json) {
       options.xAxis.categories = json[0]['month'];

         options.series[0] = {};
        options.series[0].name = 'TECHNO 1';
        options.series[0].data = json[1]['data'];
        options.series[0].stack ='EXPORT';
        options.series[0].color= '#808080';

       options.series[1] = {};
       options.series[1].name = 'TECHNO 1';
       options.series[1].data = json[0]['data'];
        options.series[1].stack = 'IMPORT';
        options.series[1].linkedTo = ':previous';
        options.series[1].color= 'url(#highcharts-default-pattern-0)';

        options.series[2] = {};
       options.series[2].name = 'TECHNO 2';
       options.series[2].data = json[3]['data'];
        options.series[2].stack = 'EXPORT';
        options.series[2].color= '#FFC125';

        options.series[3] = {};
       options.series[3].name = 'TECHNO 2';
       options.series[3].data = json[2]['data'];
        options.series[3].stack = 'IMPORT';
        options.series[3].linkedTo = ':previous';
        options.series[3].color= 'url(#highcharts-default-pattern-1)';

        options.series[4] = {};
       options.series[4].name = 'TECHNO 3';
       options.series[4].data = json[5]['data'];
        options.series[4].stack = 'EXPORT';
        options.series[4].color= '#2B99FF';

        options.series[5] = {};
       options.series[5].name = 'TECHNO 3';
       options.series[5].data = json[4]['data'];
        options.series[5].stack = 'IMPORT';
        options.series[5].linkedTo = ':previous';
        options.series[5].color= 'url(#highcharts-default-pattern-2)';

        options.series[6] = {};
       options.series[6].name = 'TECHNO 4';
       options.series[6].data = json[7]['data'];
        options.series[6].stack = 'EXPORT';
        options.series[6].color= '#C72828';

        options.series[7] = {};
       options.series[7].name = 'TECHNO 4';
       options.series[7].data = json[6]['data'];
        options.series[7].stack = 'IMPORT';
        options.series[7].linkedTo = ':previous';
        options.series[7].color= 'url(#highcharts-default-pattern-3)';

        options.series[8] = {};
       options.series[8].name = 'TECHNO 5';
       options.series[8].data = json[9]['data'];
        options.series[8].stack = 'Sortie';
        options.series[8].color= '#1CA154';

        options.series[9] = {};
       options.series[9].name = 'TECHNO 5';
       options.series[9].data = json[8]['data'];
        options.series[9].stack = 'EXPORT';
        options.series[9].linkedTo = ':previous';
        options.series[9].color= 'url(#highcharts-default-pattern-4)';

        options.series[10] = {};
       options.series[10].name = 'IMPORT';
              options.series[10].data = json[10]['data'];
       options.series[10].stack = 'IMPORT';
        options.series[10].color= 'url(#highcharts-default-pattern-5)';

        options.series[11] = {};
       options.series[11].name = 'EXPORT';
              options.series[11].data = json[11]['data'];
       options.series[11].stack = 'IMPORT';
        options.series[11].color= 'url(#highcharts-default-pattern-5)';


        //options.series[1].color= '#C89B9B';


       chart = new Highcharts.Chart(options);
   });
});

});

Answer 1

首先，您可以通过修改＆＃34;可见＆＃34;来隐藏或显示图表中的系列。系列对象的属性分别为false或true。例如：

options.series[10].visible = true; // or false

其次，您可以使用chart.update（）方法在事件侦听器（例如按下按钮）中实现该功能，并将更改作为参数传递。请看这里：Dynamic charts -> update options after render。但最简单的解决方案是重复

chart = new Highcharts.Chart(options);

声明，在您输入系列对象后，＆＃34;可见＆＃34;具有您喜欢的值的属性，用于您要显示或隐藏的每个系列（导入/导出）。

最后，在图例中有两种可点击标签只能通过自己的一些自定义jquery编程来完成。我认为图表旁边的几个小按钮实现起来会更容易，更快。

Highcharts 2组系列

1 个答案: