Vue.js

Question

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

<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

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

所以我做的第一件事就是了解 created 和 mounted 在 Vue.js 中有何不同。在处理这个项目时，我首先使用了关键字 created 。因此，在这个函数中，我放置了我的 ajax 调用，该调用为我提供了数据，然后我使用图表本身的 .addSeries 方法将这些数据加载到 'chart' 中。

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

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

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

为了让您（也许）更好地了解我在说什么，我将 post 下面的一些代码

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 - 在系列变化时重绘地图

Vue.js - Highmaps - Redraw map on series change

redraw

highmaps