Question

我正在尝试使用Highcharts构建一个类似仪表板的页面。在这一点上，我有四个图表：两个馅饼和两个仪表。请参阅以下代码：

<div class="main">
    <div class="dash-container">
        <div id="text">
            <div class="title">

            </div>
      </div>
        <div id="chars">
            <div id="gauge1"></div>
            <div id="pie1"></div>
        </div>
    </div>

    <div class="dash-container">
        <div id="text">
            <div id="title">

            </div>
      </div>
        <div id="chars2">
            <div id="gauge2"></div>
            <div id="pie2"></div>
        </div>
</div>

    </div>

＆＃34;身体结束＆＃34;文件我调用highcharts js脚本：

<script src="pie.js"></script>
<script src="gauge.js"></script>
<script src="pie2.js"></script>
<script src="gauge2.js"></script>

一切都很好看。但是，我正在使用实时更改值的仪表示例文件。这是代码，来自gauge.js：

setInterval(function() {
var point;

  point = chartSpeed.series[0].points[0];
  inc = Math.round((Math.random() - 0.5) * 100);
  newVal = point.y + inc;

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

  point.update(newVal);
}


}, 2000);

问题是两个仪表图表工作不正常。一个被卡住（不会更新数据），另一个更快地更新数据。我认为问题是SetInterval（函数...）是在gau1.js和gauge2.js中实现的，但我是javascript的新手，我真的无法解决它。建议？你还想介绍一下javascript中函数的工作原理吗？即为什么这个函数以某种方式打破了代码？

由于

Answer 1

解决：在定义仪表图表时，有一个名为＆＃34; chartspeed＆＃34;的变量，这个变量在两个图表中都有相同的名称，将其更改为＆＃34; chartspeed2＆＃34;

 var chartSpeed = Highcharts.chart('gauge2', Highcharts.merge(gaugeOptions, {
        yAxis: {
            min: 0,
            max: 200,
            title: null

并更新了gauge.js：

setInterval(function() {
var point;

  point = chartSpeed2.series[0].points[0];
  inc = Math.round((Math.random() - 0.5) * 100);
  newVal = point.y + inc;

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

  point.update(newVal);
}


}, 2000);

无法使多个图表与highcharts一起使用

1 个答案: