Question

我试图用输入框操纵图表。每个输入框应对应一个条形。在我的代码中，我可以在高级图的底部获得第一个函数来工作，但是相同的代码与条形图发生了变化，输入的ID也不起作用。有问题的函数是使用season-2作为id的最后一个函数。

var chart = new Highcharts.Chart({

  chart: {
    renderTo: 'container',
    animation: false
  },

  xAxis: {
    categories: ['2016-17', '2017-18', '2018-19', '2019-20', '2020-21', '2021-22'],
    title: {
      text: 'Season'
    }
  },


  yAxis: [{
    title: {
      text: '$ Dollars'
    }
  }],

  plotOptions: {
    series: {
      borderColor: '#2c3e50',
      point: {
        events: {
          drag: function(e) {
            $('#drag').html(
              'Dragging <b>' + this.series.name + '</b>, <b>' + this.category + '</b> to <b>' + Highcharts.numberFormat(e.y, 2) + '</b>');
              if (this.category == "2016-17"){
                $('#season-1').val(Highcharts.numberFormat(e.y, 2));
              }
              if (this.category == "2017-18"){
                $('#season-2').val(Highcharts.numberFormat(e.y, 2));
              } 
              if (this.category == "2018-19")
              {
               $('#season-3').val(Highcharts.numberFormat(e.y, 2));
              } 
              if (this.category == "2019-20"){
            $('#season-4').val(Highcharts.numberFormat(e.y, 2));
            } if (this.category == "2020-21"){
                $('#season-5').val(Highcharts.numberFormat(e.y, 2));
            }

          },
          drop: function() {
            $('#drop').html(
              'In <b>' + this.series.name + '</b>, <b>' + this.category + '</b> was set to <b>' + Highcharts.numberFormat(this.y, 2) + '</b>');
          }
        }
      },
      stickyTracking: false
    },
    column: {
      stacking: 'normal'
    },
    line: {
      cursor: 'ns-resize'
    }
  },

  tooltip: {
    yDecimals: 2
  },

  series: [{
    name: 'Salary Cap',
    data: [94000000, 102000000, 108000000, 109000000, 114000000]
  }, {
    name: 'Tax Cap',
    data: [113000000, 122000000, 130000000, 132000000, 139000000]
  }, {
    name: 'New Contract',
    data: [10996155, 10996155, 10996155, 10996155, 10996155],
    draggableY: true,
    // drag: function() { console.log(arguments); },
    dragMinY: 0,
    type: 'column',
    minPointLength: 2,
    color: 'whitesmoke'
  }, {
    name: 'Current Payroll',
    data: [110492645, 103423474, 97903566, 62944822, 28751775],
    //draggableX: true,
    draggableY: false,
    dragMinY: 0,
    type: 'column',
    minPointLength: 2,
    color: '#2c3e50'
  }]

}, function(chart) {
  $('#season-1').change(function() {
    var val = parseInt(this.value) || 0;
    chart.series[3].data[0].update({
      y: val
    });
  })
},
function(chart) {
  $('#season-2').change(function() {
    var val = parseInt(this.value) || 0;
    chart.series[3].data[1].update({
      y: val
    });
  })
});

http://jsfiddle.net/twq6gb7d/

Answer 1

我所做的是从高图初始化函数中隔离change函数，让JQuery通过选择图表的容器并调用highchart函数来处理它。

代码片段：

    .... //rest of the code
    dragMinY: 0,
    type: 'column',
    minPointLength: 2,
    color: '#2c3e50'
  }]
}); //end of the highchart initialization

$('#season-1').change(function() {
  var val = parseInt(this.value) || 0;
  $('#container').highcharts().series[3].data[0].update({
    y: val
  });
});
... // other change functions

使用JSFiddle here。

高图中只有一个功能起作用

1 个答案: