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期望setExtremes()方法的int值。所以你应该得到滑块的价值;

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

然后将此值解析为int;

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

我在这里为你解决了这个问题：jsFiddle

Highcharts：条形图

1 个答案: