组合Highchart图在Vue中不起作用

问题描述

我正在使用vue应用。我正在使用组合highchart图来显示数据。我在这里面临的问题是柱状图不起作用。下面是highcharts图的脚本，其中我正在设置图的字段。我在从服务器获取的数据响应中添加了调试器。我在下面添加了图片，该图片显示了图形现在的外观。柱状图未显示。请帮助我找出问题所在。

<script>
  import {Chart} from 'highcharts-vue';
  export default {
    components: {
      highcharts: Chart
    },data: function() {
      return {
        chartOptions: {          
          xAxis: {
            categories: []
          },yAxis: {
            min: 0,title: {
              text: 'Rainfall'
            }
          },legend: {
            enabled: false
          },title: {
            text: ''
          },tooltip: {
            headerFormat: '<span style="font-size:9px">{point.key}</span><table>',pointFormat: '<tr><td style="color:{series.color};padding:0;font-size:9px">{series.name}: </td>' +
              '<td style="padding:0;font-size:9px"><b>{point.y}</b></td></tr>',footerFormat: '</table>',shared: true,useHTML: true
          },plotOptions: {
            column: {
              pointPadding: 0.2,borderWidth: 0
            }
          },series: [{
            type: 'column',name: '',data: []
           },{
            type: 'spline',data: [],marker: {
             linewidth: 2,lineColor: 'red',fillColor: 'white'
            }
          }]
        }
      }
    },created: function () {
     this.fetchData();
    },methods: {
     fetchData: function () {
      var that = this;
      url = '/rainfallData.json'
      this.$axios.get(url)
      .then(response => {
        debugger
        that.chartOptions.xAxis.categories = response.data.dates;
        that.chartOptions.series.find((x) => x.type === "spline").data = response.data.series.find(v => v.name === 'TotalRain').data
        that.chartOptions.series[0] = response.data.series;
     });
    }
   }
 }
 </script>

响应数据

response.data.series
[{name: 'Toronto',data: [0,6,2]},{name: 'Edmonton',16,21]},{name: 'Surrey',{name: 'TotalRain',38,25]}]

解决方法

我猜你想达到this。

问题是您正在向图表分配格式错误的数据。

最后的系列必须看起来像这样：

[{
  "name": "Toronto","data": [0,6,2],"type": "column"
},{
  "name": "Edmonton",16,21],{
  "name": "Surrey",{
  "type": "spline","marker": {
    "lineWidth": 2,"lineColor": "red","fillColor": "white"
  },38,25]
}]

我删除了所有其他内容，以突出问题。

注意：如果我制作的演示不完全是您想要实现的，请随时问另一个有关该特定问题的问题，以便其他有相同问题的人也可以从中受益。通常，一个好的SO问题应该具有：

• 一个最小的可复制示例，理想情况下包含要复制的最小代码
• 指向文档的链接清楚地说明了您尝试过的方法
• 您所做的任何研究的结果（链接到对您不起作用的相关问题的链接），您尝试过的内容的代码示例，等等...

但您的问题的答案是：highcharts对每种图表类型都有非常特定的格式要求。您必须检查chartOptions的最终结果，并确保数据结构和值对所使用的图表类型有效。

---

如果您的数据是本地数据，则可以像我一样去：

import whatever from './path/to/data.json';

对外部API的典型Vue调用看起来像这样

methods: {
  fetchData() {
    this.$http.get('//your.url')
      then(response => {
        console.log({
          'response.data': response.data,this,that: 'not needed'
        });
      });
  }
}