javascript - Highcharts 中的 JQuery UI slider 使用多个数据点

Question

我在 Highcharts 中找到了一个很好的 JQuery UI slider 实现示例:http://jsfiddle.net/bdNnm/

这正是我想要的，除了有多于一列之外。我不知道如何设置数据结构来执行此操作。我有解决方案吗？

代码如下所示:

$(function () {
    function updateChart(chart, value) {
        chart.series[0].setData([data1[value]]);
    }

    function chartIncrement(identifier, value) {
        $("#slider-val").text(Highcharts.dateFormat('%b %Y', data1[value][0]));
        updateChart(chart, value);
    }

    var slideIt = true;
    var data1 = [
        [1362200400000, 5.20],
        [1364875200000, 5.00],
        [1367467200000, 5.60],
        [1370145600000, 5.90],
        [1372737600000, 5.80],
        [1375416000000, 5.50],
        [1378094400000, 5.30],
        [1380686400000, 5.50],
        [1383364800000, 5.00],
        [1385960400000, 4.80]
    ];

    var yMaxVal = Math.max.apply(Math, data1.map(function (o) {
        return o[1];
    }));
    yMaxVal = Math.ceil(yMaxVal);

    $("#slider-val").text(Highcharts.dateFormat('%b %Y', data1[0][0]));

    // Build the chart
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            defaultSeriesType: 'column',
            borderColor: '#EBBA95',
            borderWidth: 1
        },
        title: {
            text: ''
        },
        yAxis: {
            title: null,
            min: 0,
            max: yMaxVal,
            tickInterval: 2
        },
        credits: {
            enabled: false
        },
        legend: {
            enabled: false
        },
        xAxis: {
            title: null,
            labels: {
                enabled: false
            },
            type: 'datetime'
        },
        series: [{
            name: 'Labor Force',
            data: [data1[0]],
            color: '#729fcf'
        }]
    });

    $(function () {
        $('#yearSlider').slider({
            value: 0,
            range: "min",
            min: 0,
            max: data1.length - 1,
            animate: true,
            slide: function (event, ui) {
                chartIncrement(this, ui.value);
            },
            change: function (event, ui) {
                chartIncrement(this, ui.value);
            }
        });
    });

    function scrollSlider() {
        if (!slide_it) return false;

        var slideValue;
        slideValue = $("#yearSlider").slider("value");
        if (slideValue >= 0) {
            if (slideValue == data1.length - 1) {
                slideValue = -1;
            }
            $("#yearSlider").slider("value", slideValue + 1);
            setTimeout(scrollSlider, 1000);
        }
    }

    $('#startSlider').click(function () {
        var playPause = $("#startSlider").prop('value');
        //console.log(playPause);
        if (playPause == "Play") {
            window.slide_it = true;
            scrollSlider();
            $("#startSlider").prop('value', 'Pause');
        } else {
            window.slide_it = false;
            //console.log(playPause);
            $("#startSlider").prop('value', 'Play');
        }
    });
});

Answer 1

我尝试在不彻底改变数据结构的情况下解决这个问题。这是 fiddle :LINK

现在你的数据结构如下所示:

var data1 = [
    //               *s1* *s2*  **you can add other series**
    [1362200400000, 5.20, 5.40],
    [1364875200000, 5.00, 5.20],
    [1367467200000, 5.60, 5.80],
    [1370145600000, 5.90, 6.10],
    [1372737600000, 5.80, 6.00],
    [1375416000000, 5.50, 5.70],
    [1378094400000, 5.30, 5.50],
    [1380686400000, 5.50, 5.70],
    [1383364800000, 5.00, 5.20],
    [1385960400000, 4.80, 5.00]
];

它基本上是一个矩阵。第一列之后的所有列都是新系列的数据。

我更改了 updateChart 函数，以便它更新每个系列，而不是硬编码的 series[0]。它不必知道有多少个系列。

function updateChart(chart, value) {
    for(i=0; i<chart.series.length; i++) {
        // update each series
        chart.series[i].setData([data1[value][i+1]]);
    }
}

我还必须使用 getMaxYValue 函数跳过一些麻烦，以便它能够找到所有系列数据中的最大值。

当然，也可以选择更改data1的结构，以使查找最大值相对更容易。但我不知道您想通过此实现什么目的，也不知道您需要多强大的代码，因此我采用了最保守的方法，并尽可能少地更改了代码。