jquery - HighCharts 显示/隐藏数据点

Question

我正在尝试建立一个 HighCharts 报告，以在小组讨论期间使用相同的调查数据。参与者使用智能手机对 10 个问题进行投票，主持人将在讨论中逐一审核结果(不一定按顺序)。

目标...

单击表中的“眼睛”图标(jQuery Flip)时，我想在图表中显示相应的数据点(3 个系列)。

理想情况下，我将完整的数据集加载到系列中，根据数组索引隐藏所有数据并取消隐藏。

到目前为止已尝试过...

图表看起来已经不错，但我找不到一个好的解决方案来在图表中一一显示结果(尤其是不按顺序显示!)。我已经尝试过调整数据点的不透明度，但这对样条线/线条没有影响。

图表和表格的图像:

/image/2VAw5.jpg

JSFiddle:

http://jsfiddle.net/q1c8rtm7/

    series: [{
        name: 'Average',
        zIndex: 1,
        data: [[2.5,7.6],[7.5,6.4],[12.5,6.6],[17.5,5.4],[22.5,6.2],[27.5,5.4],[32.5,7.0],[37.5,7.2],[42.5,6.4],[47.5,5.8],[52.5,6.6]]
    },
    {
        name: 'Median',
        zIndex: 1,
        lineWidth: 0,
        lineColor: 'rgba(207, 193, 8, 255)',
        marker: {
            fillColor: 'rgba(207, 193, 8, 255)'
        },
        data: [[2.5,7.0000000000],[7.5,6.0000000000],[12.5,6.0000000000],[17.5,5.0000000000],[22.5,6.0000000000],[27.5,6.0000000000],[32.5,6.0000000000],[37.5,7.0000000000],[42.5,7.0000000000],[47.5,6.0000000000],[52.5,7.0000000000]]
    },
     {
        name: 'Min/Max',
         type: 'arearange',
         lineWidth: 0, 
         fillColor: 'rgba(163, 163, 163, 0.2)',
         lineColor: 'rgba(163, 163, 163, 0.2)',
         zIndex: 0,
         marker: {
            enabled: false,
            fillColor: 'rgba(163, 163, 163, 0.2)'
         },
         data: [[2.5,6.0000000000, 10.0000000000],[7.5,5.0000000000, 8.0000000000],[12.5,6.0000000000, 8.0000000000],[17.5,2.0000000000, 8.0000000000],[22.5,3.0000000000, 9.0000000000],[27.5,2.0000000000, 7.0000000000],[32.5,5.0000000000, 9.0000000000],[37.5,6.0000000000, 10.0000000000],[42.5,3.0000000000, 8.0000000000],[47.5,3.0000000000, 9.0000000000],[52.5,6.0000000000, 7.0000000000]]
    }]

感谢您的任何想法/提示/反馈!

安德烈

Answer 1

默认情况下不支持该行为，需要一些自定义解决方案。例如，您可以通过 setData 方法操作系列数据:

var dataSets = [
        [
            [2.5, 7.6],
            [7.5, 6.4],
            [12.5, 6.6],
            [17.5, 5.4]
        ],
        [
            [2.5, 7.0000000000],
            [7.5, 6.0000000000],
            [12.5, 6.0000000000],
            [17.5, 5.0000000000]
        ],
        [
            [2.5, 6.0000000000, 10.0000000000],
            [7.5, 5.0000000000, 8.0000000000],
            [12.5, 6.0000000000, 8.0000000000],
            [17.5, 2.0000000000, 8.0000000000]
        ]
    ],
    selections = [false, false, false, false];


var chart = Highcharts.chart('container', {...});

var buttons = document.getElementsByClassName('toggle'),
    i = 0;

for (; i < buttons.length; i++) {
    buttons[i].addEventListener('click', function() {
        var index = this.value,
            actualDataSet = [
                [],
                [],
                []
            ];

        selections[index] = !selections[index];

        dataSets[0].forEach(function(el, i) {
            if (selections[i]) {
                actualDataSet[0].push(el.slice());
                actualDataSet[1].push(dataSets[1][i].slice());
                actualDataSet[2].push(dataSets[2][i].slice());
            }
        });

        chart.series.forEach(function(s, j) {
            s.setData(actualDataSet[j], false);
        });

        chart.redraw();
    });
}

<小时/>

现场演示: http://jsfiddle.net/BlackLabel/40ued16x/

API引用: https://api.highcharts.com/class-reference/Highcharts.Series#setData