Highcharts : 选择

Question

我制作了一个带有日期的条形图。目前，要删除日期，您必须单击图例中的日期。我希望一次删除多个日期。 让我们举个例子。我的日期范围从 1960 年到 2015 年。如果我的图表上有 2000 年到 2005 年的日期，那么我希望如果您单击 1960 年和 1999 年，那么之间的所有日期都将被删除/隐藏。很多日期时它会更快。 怎么办？

这是我的代码：

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        colors:[
            '#7cb5ec',
            '#434348',
            '#90ed7d',
            '#f7a35c',
            '#8085e9',
            '#f15c80',
            '#e4d354',
            '#2b908f',
            '#f45b5b',
            '#91e8e1',
            '#DA70D6',
            '#1E90FF',
            '#E0F000'
            ],
        legend:{
            itemStyle:{
            fontSize:'10px',
            font:'10pt',
            color:'#000000'
          }
        },
        title:{
            style:{
                fontSize:'0px'
           }
        },
        subtitle:{
            style:{
            fontSize:'0px'
          }
        },
        xAxis: {
            categories: [
                '',
            ],
        },
        yAxis: {
            min: 15,
            title: {
                text: 'Number',
                style:{
                    fontSize:'0px'
                }
            }
        },
        tooltip: {        
            shared: false,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            name: '2004',
            data: [49.9],

        }, 
        {
            name: '2005',
            data: [83.6]

        }, 
        {
            name: '2006',
            data: [48.9]

        }, 
        {
            name: '2007',
            data: [69.1]

        }, 
        {
            name: '2008',
            data: [83.6]

        }, 
        {
            name: '2009',
            data: [40.9]

        },
        {
            name: '2010',
            data: [69.9]

        }, 
        {
            name: '2011',
            data: [83]

        }, 
        {
            name: '2012',
            data: [28.9]

        },
        {
            name: '2013',
            data: [40.9]

        }, 
        {
            name: '2014',
            data: [81.6]

        }, 
        {
            name: '2015',
            data: [24.9]

        },
        {
            name: '2016',
            data: [46.4]

        }]
    });
});

谢谢

Answer 1

我建议您将年份作为 x 轴中的值（作为类别）而不是每年都作为自己的系列，然后使用 Highcharts 的原生缩放功能来允许用户选择特定的日期范围.

我已经更新了您的小提琴并进行了一些更改，我将在下面解释：https://jsfiddle.net/brightmatrix/hr28s27L/

首先，在您的chart 选项中，我添加了zoomType: 'x' 以允许用户使用鼠标放大特定年份。 x 的值意味着它们只能水平（横向）缩放，这使得交互更加“清晰”。

chart: {
  type: 'column',
  zoomType: 'x'
},

其次，我用年份作为类别/值更新了您的 x 轴：

xAxis: {
  categories: ['2004','2005','2006','2007','2008','2009','2010','2011','2012','2013','2014','2015','2016']
},

最后，我更新了您的系列以仅显示数据点，然后将其绘制在 y 轴上：

series: [{
  name: 'data by year',
  data: [49.9,83.6,48.9,69.1,83.6,40.9,69.9,83,28.9,40.9,81.6,24.9,46.4]
}]

当用户单击并拖动鼠标光标时会发生以下情况：

阴影框是他们选择的。一旦他们释放光标，图表将自动调整以仅显示他们选择的内容。右上角会出现一个“重置缩放”按钮，让他们可以回到所有年份：

更新（2016 年 7 月 19 日）：我做了一些研究，想在此图表中添加一个简单的滑块元素，让用户可以从一系列年份中进行选择。

可以在这里找到我的小提琴的更新版本，它显示了这个带有滑块的示例图表：https://jsfiddle.net/brightmatrix/uvat8u05/。

处理滑块的代码如下所示。我发现使用parseInt() 函数将滑块值显式设置为整数解决了几个问题：

• 您可以正确比较滑块值，以确保用户不能选择早于开始年份的结束年份。
• 当用户选择相同的开始和结束年份时，setExtremes() 函数会正确显示单个年份。
• 始终显示所有 x 轴标签。在我添加parseInt() 之前，当用户在滑块中选择不同的值时，一些标签会消失。

请务必阅读我在 HTML 和 Javascript 窗格中留下的 cmets，因为我已包含有关我做出某些代码决策的原因的更多详细信息。

// on change handler for both sliders
$('.mySlider').bind('change', function(e) {

    e.preventDefault();
    var chart = $('#container').highcharts();

    // convert the slider values to integers to make sure setExtremes() works as expected
    var slider1Val = parseInt($('input[name="slider1"]').val());
    var slider2Val = parseInt($('input[name="slider2"]').val());

    if (slider2Val < slider1Val) {
        // warn the user if they try to choose an end year that is later than the start year
        alert("You can't choose an end year that is earlier than your start year.");
    } else {
        // use setExtremes to set the x-axis ranges based on the values in the sliders
        chart.xAxis[0].setExtremes(slider1Val, slider2Val);
    }

});

希望这些信息对您有所帮助。