Highcharts: barchart

Question

У меня есть барчарт с много лет по оси x. Я хочу выбрать годы. Здесь у нас есть возможность сделать это двумя способами: либо с помощью щелчка, либо с помощью ползунков. У меня две проблемы.

• Первый вопрос касается перетаскивания мышью: когда я выбираю крайние годы, то появляются два года, а не только выбранные. Например, если я выберу «1960», то появится 1960 и 1961. То же самое, если я выберу 2016 2015 и 2016 годы.

• Вторая проблема касается ползунков. Если оба ползунка имеют одинаковое значение, возникает проблема. Например, если две мои ползунки на 1998, график показывает годы 2015 и 2016 Если они оба в 1966, график показывает годы 1994 и 1995.

Вот мой код HTML:

<script src="https://code.highcharts.com/highcharts.js"></script> 
<script src="https://code.highcharts.com/modules/exporting.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. 
    --> 
    <form oninput="output1.value=parseInt(slider1.value)+1960;output2.value=parseInt(slider2.value)+1960"> 
            <input type="range" name="slider1" class="mySlider" min="0" max="56" value="0" /> 
            <output name="output1" id="output1" for="slider1" style="font-size:10px;padding-top:0px;text-align:left">1960</output> 
            <br /> 
            <input type="range" name="slider2" class="mySlider" min="0" max="56" value="56" /> 
            <output name="output2" id="output2" for="slider2" style="font-size:10px;padding-top:0px;text-align:right">2016</output> 
           </form> 
</div> 

Вот мой код JavaScript:

$(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] 
    }] 
    }); 

    // on change handler for both sliders 
    $('.mySlider').bind('change', function(e) { 
    e.preventDefault(); 
    var chart = $('#container').highcharts(); 
    // use setExtremes to set the x-axis ranges based on the values in the sliders 
    chart.xAxis[0].setExtremes($('input[name="slider1"]').val(), $('input[name="slider2"]').val()); 
    }); 

}); 

Посмотрите в: https://jsfiddle.net/uvat8u05/13/

Как решить эти две проблемы, пожалуйста?

Благодарим вас

Answer 1

Highcharts ожидают Int значения для setExtremes() метода. Таким образом, вы должны получить значение ползунков;

$('input[name="slider1"]').val(); 

Затем проанализировать это значение до int;

parseInt($('input[name="slider1"]').val()); 

Здесь я установил для Вас: jsFiddle