スライダーon barchart

Question

Highchartsで私はバーチャルを実現しました。これは1年あたりの文書数を示します。 1つまたは複数の日付を選択するには、グラフの下にあるスライダを使用します。 私はそれを所定の場所に置くことができました。 しかし、私はそれをグラフにリンクすることはできません。 ここで、最初のカーソルを2000に、2番目のカーソルを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/

よろしく、