Question

我正在尝试在固体量规中使用以前创建的数据数组。问题是：当我使用setInterval函数动态更新该点的值时，我的数组将其第一个元素更新为当前值。

我已经尝试了一些解决方案，例如复制数组，克隆它，甚至再次重新分配第一个值，但是没有任何作用，该值总是在变化，我认为这只是参考，但是在哪里？示例：数组为：

fullData=[[{y:25},{y:87}],[{y:73},{y:154}]]

setInterval运行数组更新时，它的第一个值位置为：

fullData=[[{y:440},{y:239}],[{y:200},{y:320}]]

这是一个示例：https://jsfiddle.net/asonipse/nsvt0jb3/1/3

var fullData = [
    [{
      'name': 'A',
      'innerRadius': 50,
      'radius': 70,
      'y': 440
    }, {
      'name': 'E',
      'innerRadius': 70,
      'radius': 100,
      'y': 239
    }],
    [{
      'name': 'A',
      'innerRadius': 50,
      'radius': 70,
      'y': 200
    }, {
      'name': 'E',
      'innerRadius': 70,
      'radius': 100,
      'y': 320
    }]
  ],
  cont = 1,
  series = [];

series.push({
  'name': 'Name serie',
  'data': fullData[0],
  'dataLabels': false
});

var gaugeOptions = {
  chart: {
    type: 'solidgauge',
  },
  title: {
    text: 'Ejemplo'
  },
  tooltip: {
    enabled: true,
    pointFormat: '{point.name}: <b>{point.y}</b>'

  },
  pane: {
    center: ['50%', '85%'],
    size: '150%',
    startAngle: -90,
    endAngle: 90,
    background: {
      backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
      innerRadius: '50%',
      outerRadius: '100%',
      shape: 'arc'
    }
  },
  // the value axis
  yAxis: {
    min: 0,
    max: 440,
    lineWidth: 0,
    minorTickInterval: null,
    tickPixelInterval: 400,
    tickWidth: 0,
    tickAmount: null,
  },
  plotOptions: {
    solidgauge: {
      dataLabels: {
        y: 5,
        borderWidth: 0,
        useHTML: true
      }
    }
  },
};

$('#container-speed').highcharts(Highcharts.merge(gaugeOptions, {
  credits: {
    enabled: false
  },
  series: series
}), function(chart) {
  if (!chart.renderer.forExport) {
    setInterval(function() {
      if (chart && chart.series) {
        chart.series[0].setData(fullData[cont]);
        cont = (cont + 1 === 2) ? 0 : cont + 1;
      }
    }, 2000);
  }
});

Answer 1

之所以发生，是因为Highcharts改变了源数组的问题，即数组中的对象。我们的GitHub存储库中报告了此问题（以及一些相关问题）。您可以在这里了解更多信息：https://github.com/highcharts/highcharts/issues/4259

但是，一切都不会丢失，因为您只需使用Object.assign函数就可以重构代码，从而带来预期的效果。

首先，您需要使用上述功能来使您的fullData变量“独立”于图表。像这样更改代码：

var fullData = [
  [{
    'name': 'A',
    'innerRadius': 50,
    'radius': 70,
    'y': 440
  }, {
    'name': 'E',
    'innerRadius': 70,
    'radius': 100,
    'y': 239
  }],
  [{
    'name': 'A',
    'innerRadius': 50,
    'radius': 70,
    'y': 200
  }, {
    'name': 'E',
    'innerRadius': 70,
    'radius': 100,
    'y': 320
  }]
];
var cont = 1;
var series = [];
series.push({
  'name': 'Name serie',
  'data': [
    Object.assign({}, fullData[0][0]),
    Object.assign({}, fullData[0][1]),
  ],
  'dataLabels': false
});

然后，使用新值更新您的积分：

 setInterval(function() {
      if (chart && chart.series) {
        chart.series[0].points.forEach((point, i) => {
            point.update(fullData[cont][i])
        })
        cont = (cont + 1 === 2) ? 0 : cont + 1;
      }
    }, 1000);

现在它应该可以按预期工作。

实时示例：https://jsfiddle.net/xLcewn1z/

Solid Gauge Highcharts数据分配

1 个答案: