Question

我有一个简单的仪表图，但我希望动态地改变它，例如，我希望根据从数据库中提取的数据设置比例限制。我将如何实现这一目标？

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

<div id="chart-A" class="chart"></div>

var axismin = 10;

$(function(axismin,axismax) {


  $('#chart-A').highcharts({
      chart: {
        type: 'gauge',
      },
      title: {
        text: 'Gauge'
      },
      pane: {
        startAngle: -150,
        endAngle: 150,
      },
      // the value axis
      yAxis: {
        min: axismin,
        max: 100,
      },
      series: [{
        data: [1]
      }]
    },
    // Add some life
    function(chart) {
      if (!chart.renderer.forExport) {
        setInterval(function() {
          var point = chart.series[0].points[0],
            newVal,
            inc = Math.round((Math.random() - 0.5) * 20);

          newVal = point.y + inc;
          if (newVal < 0 || newVal > 100) {
            newVal = point.y - inc;
          }

          point.update(newVal);

        }, 500);
      }
    });
});

jsfiddle

Answer 1

假设从数据库中调用最小值和最大值。

$(function() {

 //suppose using php
  var axismin = <?php echo  $axismin ?>;
  var axismax = <?php echo  $axismax ?>;

  function init(axismin, axismax) {
    ......
  }
  init(axismin, axismax); //call chart function with arguments
});

Fiddle演示

Answer 2

Highcharts提供了一些改变已渲染图表的功能。要更新yAxis.min和yAxis.max值，您可以使用setExtremes或update。

API参考：

使用变量

2 个答案: