條形圖上的滑塊

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/

問候，