条形图上的滑块

Question

借助 Highcharts，我实现了条形图。这个显示了每年的文件数量。要 select 一个或多个日期，请使用位于图表下方的滑块。我设法把它放在适当的位置。但是，我无法link 将它添加到图表中。在这里，如果您将第一个光标放在 2000 年，第二个光标放在 2003 年，他会让图表只显示日期 2000、2001、2002 和 2003。

你能帮我做这个吗？

这是我的 HTML/PHP 代码：

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

<div id="container"></div>

<div style="margin: 20px 0px 0px 60px">
  <!--
  The "oninput" attribute is automatically showing the value of the slider on load and whenever the user changes the value.
  Since we are using a category x-axis, the values are between 0 and 12. For this example, I'm adding your base year (2004) 
  to the output value so it shows a label that's meaningful to the user. To expand this example to more years, set your max value
  to the appropriate value and the base year to wherever you plan to start your chart's data.
  -->
     <script>
  $( function() {
    $( "#slider-range" ).slider({
      range: true,
      min: 1960,
      max: 2016,
      values: [ 1960, 2016 ],
      slide: function( event, ui ) {
        $( "#amount" ).val( ui.values[ 0 ] + " - " + ui.values[ 1 ] );
      }
    });
    $( "#amount" ).val( $( "#slider-range" ).slider( "values", 0 ) +
      " - " + $( "#slider-range" ).slider( "values", 1 ) );
  } );
  </script>


<p>
  <label for="amount">Year(s):</label>
  <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>

<div id="slider-range"></div>
</div>

这是我的 JS 代码：

$(function () {
  $('#container').highcharts({
    chart: {
      type: 'column',
      zoomType: 'x'
    },
    colors:[
      '#d8d826'
    ],
    legend:{
      enabled:false
    },
    title:{
      style:{
        fontSize:'0px'
      }
    },
    subtitle:{
      style:{
        fontSize:'0px'
      }
    },
    xAxis: {
        // NOTE: There is an interesting bug here where not all labels will be shown when the chart is redrawn.
      // I'm not certain why this is occuring, and I've tried different methods to no avail. I'll check with Highcharts.
      categories: ['1960','1961','1962','1963','1964','1965','1966','1967','1968','1969','1970','1971','1972','1973','1974','1975','1976','1977','1978','1979','1980','1981','1982','1983','1984','1985','1986','1987','1988','1989','1990','1991','1992','1993','1994','1995','1996','1997','1998','1999','2000','2001','2002','2003','2004','2005','2006','2007','2008','2009','2010','2011','2012','2013','2014','2015','2016'],
      tickmarkPlacement: 'on', tickInterval: 1,
      minRange: 1   // set this to allow up to one year to be viewed
    },
    yAxis: {
      min: 15,
      title: {
        text: 'Number',
        style:{
          fontSize:'0px'
        }
      }
    },
    tooltip: {        
      shared: false,
      useHTML: true
    },
    plotOptions: {
      column: {
        pointPadding: 0.2,
        borderWidth: 0
      }
    },
    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,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,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,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,49.9,83.6,48.9,69.1,50]
    }]
  });  
});

您可以在 : https://jsfiddle.net/uvat8u05/20/

上看到结果

Answer 1

您的问题的简单解决方案是添加 jQuery 负责图表加载事件回调函数中的滑块，并使用 setExtremes 在幻灯片上设置新的极值： http://api.highcharts.com/highcharts#Axis.setExtremes

function(chart) {

    $("#slider-range").slider({
      range: true,
      min: 1960,
      max: 2016,
      values: [1960, 2016],
      slide: function(event, ui) {
        $("#amount").val(ui.values[0] + " - " + ui.values[1]);
        chart.xAxis[0].setExtremes(ui.values[0] - 1960, ui.values[1] - 1960)
      }
    });
    $("#amount").val($("#slider-range").slider("values", 0) +
      " - " + $("#slider-range").slider("values", 1));

  }

在这里你可以找到它如何工作的实例：https://jsfiddle.net/uvat8u05/22/

此致，

条形图上的滑块

Slider on barchart

slider

bar-chart

highcharts