Highcharts：选择 [英] Highcharts : selection

问题描述

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

这是我的代码：

 <$ c $ highcharts（{
 chart：{
 type：'column'
}，
 colors（$ {
 $（'＃container'）。 ：[
'＃7cb5ec'，
'＃434348'，
'＃90ed7d'，
'＃f7a35c'，
'＃8085e9'，
'＃f15c80'，
'＃e4d354'，
'＃2b908f'，
'＃f45b5b'，
'＃91e8e1'，
'＃DA70D6' ，
'＃1E90FF'，
'＃E0F000'
]，
图例：{
 itemStyle：{
 fontSize：'10px'，
字体：'10pt'，
颜色：'＃000000'
} 
}，
标题：{
 style：{
 fontSize：' 0px'
} 
}，
 subti tle：{
 style：{
 fontSize：'0px'
} 
}，
 xAxis：{
 categories：[
'' ，
]，
}，
 yAxis：{
 min：15，
 title：{
 text：'Number'，
 style ：{
 fontSize：'0px'
} 
} 
}，
工具提示：{
 shared：false，
 useHTML：true 
}，
 plotOptions：{
列：{
 pointPadding：0.2，
 borderWidth：0 
} 
}，
 series ：[{
 name：'2004'，
 data：[49.9]，
 
}，
 {
名称：'2005'，
 data：[83.6] 
 
}，
 {
 name：'20 06'，
数据：[48.9] 
 
}，
 {
名称：'2007'，
数据：[69.1] 
 
}，
 {
 name：'2008'，
 data：[83.6] 
 
}，
 {
 name ：'2009'，
 data：[40.9] 
 
}，
 {
名称：'2010'，
数据：[69.9] 
 $ b $，
 {
名称：'2011'，
数据：[83] 
 
}，
 {
名称：'2012'，
数据：[28.9] 
 
}，
 {
名称：'2013'，
数据：[40.9] 
 $ b $，
 {
名称：'2014'，
数据：[81.6] 
 
}，
 {
名称：'2015'，
数据：[24.9] 
 
}，
 {
名称：'2016'，
数据：[46.4] 
 
}] 
}）; 
}）; 
  

谢谢

解决方案 div>

与其将每年作为自己的系列，我建议您将年份作为x轴中的值（作为类别），然后使用Highcharts的本地缩放功能来允许用户选择某个特定的日期范围。

我已经更新了一些更改，我将在下面解释：

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

更新（2016年7月19日）：我做了一些研究，允许用户选择多年。

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

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

• 您可以正确地比较滑块值，以确保用户无法选择比开始年份早的结束年份。 setExtremes（）函数正确显示用户选择相同的开始和结束年份的一年。


• 所有x轴标签始终显示。在添加 parseInt（）之前，当用户在滑块中选择不同的值时，某些标签消失。
  

请务必阅读我在HTML和Javascript窗格中留下的评论，因为我已经包含了关于为什么我做出某些代码决定的更多细节。

  //在两个滑块的变更处理程序上
 $（'。mySlider'）。bind（'change'，function（e）{
 
 e.preventDefault（）; 
 var chart = $（'＃container'）。highcharts（）; 
 
 //将滑块值转换为整数以确保setExtremes（）如预期的那样
 var slider1Val = parseInt（$（'input [name =slider1]'）。val（））; 
 var slider2Val = parseInt（$（'input [name =slider2] '）.val（））; 
 
 if（slider2Val< slider1Val）{
 // //如果用户尝试选择晚于开始年份的结束年份，则警告用户
 alert（你不能选择比你的开始更早的结束年份ar。）; 
} else {
 //使用setExtremes根据滑块中的值设置x轴范围
 chart.xAxis [0] .setExtremes（slider1Val，slider2Val ）; 
} 
 
}）; 
  

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

I made a barchart with dates. Currently, to remove the dates, you must click on the dates in the legend. I wish delete multiple dates at once. Let's take an example. My dates range from 1960 to 2015. If I would have on my chart the dates from 2000 to 2005, so I would like that if you click on 1960 and 1999, then all the dates between are deleted / hidden. It goes faster when many dates. How to do ?

Here is my code :

$(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]

        }]
    });
});

Thanks

解决方案

Rather than having each year as its own series, I would recommend that you place the years as the values in your x-axis (as categories) and then use Highcharts' native zoom function to allow users to select a certain date range.

I've updated your fiddle with some changes, which I explain below: https://jsfiddle.net/brightmatrix/hr28s27L/

First, in your chart option, I added zoomType: 'x' to allow users to use their mouse to zoom in on specific years. The value x means they can only zoom horizontally (across), which makes for a "cleaner" interaction.

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

Second, I updated your x-axis with the years as the categories/values:

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

Lastly, I updated your series to show just the data points, which are then plotted on the y-axis:

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

Here is what happens when a user clicks and drags their mouse cursor:

The shaded box is what they are selecting. Once they release the cursor, the chart will automatically adjust to show only what they chose. A "Reset Zoom" button will appear at the top right to allow them to go back to all years:

Update (July 19, 2016): I did some research on adding a simple slider element to this chart that allows users to choose from a range of years.

An updated version of my fiddle that shows this example chart with sliders can be found here: https://jsfiddle.net/brightmatrix/uvat8u05/.

The code to handle the sliders is shown below. I discovered that explicitly setting the slider values to integers using the parseInt() function solved a couple of problems:

• You can correctly compare the slider values to make sure users can't choose an end year that is earlier than the start year.
• The setExtremes() function correctly shows a single year when users choose the same start and end year.
• All x-axis labels are shown at all times. Before I added parseInt(), some labels disappeared when users chose different values in the sliders.

Please be sure to read the comments I've left in both the HTML and Javascript panes, as I've included additional details on why I made certain code decisions.

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

});

I hope this information is helpful for you.

这篇关于Highcharts：选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！