使用多个数据点的 Highcharts 中的 JQuery UI 滑块

JQuery UI Slider in Highcharts using more then one datapoint

本文关键字：中的 Highcharts JQuery UI 滑块 数据      更新时间：2023-09-26

我在Highcharts中找到了一个实现JQuery UI滑块的很好的例子：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');
        }
    });
});

我试图在不彻底改变您的数据结构的情况下解决这个问题。这是小提琴：链接

所以现在你的数据结构看起来像这样：

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的结构，以使查找最大值相对容易。但是我不知道你想用这个实现什么，我不知道你需要多健壮的代码，所以我采用了最保守的方法，尽可能少地更改了你的代码。

相关文章：