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＆＃39;而不是将每年作为自己的系列。原生缩放功能，允许用户选择特定的日期范围。

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

首先，在chart选项中，我添加了zoomType: 'x'以允许用户使用鼠标放大特定年份。值x意味着它们只能水平缩放（跨越），这样可以使＆＃34;更清洁＆＃34;相互作用。

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]
}]

以下是用户点击并拖动鼠标光标时发生的情况：

阴影框是他们选择的。一旦他们释放光标，图表将自动调整以仅显示他们选择的内容。 A＆＃34;重置缩放＆＃34;按钮将出现在右上角，以允许它们回到所有年份：

更新（2016年7月19日）：我做了一些研究，在此图表中添加了一个简单的滑块元素，允许用户选择多年。

可以在此处找到我的小提琴的更新版本，其中显示了带滑块的示例图表：https://jsfiddle.net/brightmatrix/uvat8u05/。

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

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

请务必阅读我在HTML和Javascript窗格中留下的评论，因为我已经提供了有关我为何做出某些代码决策的其他详细信息。

// 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);
    }

});

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

Highcharts：选择

1 个答案: