Question

通过Highcharts我实现了一个条形图。这个显示每年的文件数量。要选择一个或多个日期，请使用图表下方的滑块。我设法把它放到位。但是，我无法将其链接到图表。在这里，如果你把第一个光标放在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/

此致

在条形图上的滑块

1 个答案: