Question

我有一个highmaps'图表'，我唯一想要的是在外部函数中重绘整个地图。让我解释一下。当页面加载时，地图立即绘制自己，但我从外部服务获取一些数据并将其设置为变量。然后我想重新绘制图表，以便新数据显示在地图本身中。以下是我的代码。

<template>
  <div>
    <highmaps :options="chartOptions"></highmaps>
  </div>
</template>

<script>
  import axios from 'axios';
  import HighCharts from 'vue-highcharts';
  import json from '../map.json'

  let regions = [];

    export default {
    data: function () {
      return {
        chartOptions: {
          chart: {
            map: json, // The map data is taken from the .json file imported above
          },
            map: {
              /* hc-a2 is the specific code used, you can find all codes in the map.json file */
              joinBy: ['hc-key', 'code'],
              allAreas: false,
              tooltip: {
                headerFormat: '',
                pointFormat: '{point.name}: <b>{series.name}</b>'
             },
          series: [
            {
              borderColor: '#a0451c',
              cursor: 'pointer',
              name: 'ERROR',
              color: "red",
              data: regions.map(function (code) {
                return {code: code};
              }),
            }
          ],
        }
    },
    created: function(){
      let app = this;

      /* Ajax call to get all parameters from database */
      axios.get('http://localhost:8080/devices')
        .then(function (response) {
          region.push(response.parameter)

          /* I would like to redraw the chart right here */
        }).catch(function (error){
        console.error("Download Devices ERROR: " + error);
      })
    }
  }
</script>

如您所见，我导入了我的地图，并且Regions变量设置为空数组。这样做会导致地图只有边框，没有区域用红色着色。之后，有created:function()函数用于进行ajax调用和检索数据。之后，我只是将数据保存到数组中，然后显然没有任何反应，但我想重新绘制地图，以便显示新导入的数据。这里是我想要创建的图像。

如果你对如何实现这样的事情有任何想法，或者只是想建议更好的方法来处理问题，请发表评论。

提前感谢您的帮助。干杯！

Answer 1

经过几天没有任何回答，我在网上找到了一些边际帮助，并对这个问题得出了一个非常令人满意的结论，所以我希望它可以帮助别人。

所以我做的第一件事就是了解Vue.js中created和mounted的不同之处。在处理这个项目时，我首先使用了关键字created。因此，在这个函数中，我放置了一个给我数据的ajax调用，然后我将这些数据加载到＆＃39;图表中。通过使用图表本身的.addSeries方法。

为了引用图表本身我使用了这个：let chart: this.$refs.highcharts.chart。这将在您的任何组件/ html元素中搜索字段refs，并将其链接到变量。所以在HTML中有类似的东西：

<template>
  <div>
    <highmaps :options="chartOptions" ref="highcharts"></highmaps>
  </div>
</template>

真正的问题是图表在所有这个过程中都没有开始渲染，所以我用created更改了mounted关键字，这意味着它会在执行时执行所有代码所有组件都已正确安装，因此我的图表已经呈现。

为了（或许）更好地了解我所说的内容，我将在下面发布一些代码

mounted: function(){
  let errorRegions = [];
  let chart = this.$refs.highcharts.chart;

  axios.get('localhost:8080/foo').then(function(response)
  {
    /* Code to work on data */
    response.forEach(function(device){
      errorRegions.push(device);
    }
    chart.addSeries({
      name: "ERROR",
      color: "red",
      data: errorRegions
    }
    /* ...Some more code... */
  })
}

这就是结果（已经以相同的方式添加了更多系列）

真希望我能帮助别人。干杯！

Vue.js - Highmaps - 系列更改时重绘地图

1 个答案: