组合highchart图在vue中不起作用答案

【问题标题】：Combination highchart graph not working in vue组合highchart图在vue中不起作用
【发布时间】：2020-12-13 12:10:12
【问题描述】：

我正在开发一个 vue 应用程序。我正在使用组合高图来显示数据。我在这里面临的问题是柱形图不起作用。下面是 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',
            name: '',
            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, 0, 6, 2]}, {name: 'Edmonton', data: [0, 0, 16, 21]}, {name: 'Surrey', data: [0, 0, 16, 2]}, , {name: 'TotalRain', data: [0, 0, 38, 25]}]

【问题讨论】：

您的组件的 javascript 已损坏（您在创建后缺少逗号，并且结束括号与开始括号不匹配。您能确定 a）它只是一个复制/粘贴错误，b）您用您在项目中的确切内容更新问题。理想情况下，您应该提供minimal reproducible example。您可能会发现 codesandbox.io 对原型设计很有用。
@tao 对不起先生。这只是一个复制粘贴问题
您能否确保所显示的数据与您所拥有的数据完全相同？你在这里展示的那个是borken。理想情况下，您应该复制/粘贴 json，这样可以确保其中没有拼写错误并且它是有效的。
@tao 再次抱歉。复制/粘贴搞砸了
@WojciechChmiel 问题已解决。我根据需要使用不同的 SQL 查询从 DB 中提取，现在它正在工作。谢谢你

标签： javascript vue.js highcharts

【解决方案1】：

我猜你想达到this。

问题是您将格式错误的数据分配给图表。

最后的系列必须是这样的：

[{
  "name": "Toronto",
  "data": [0, 0, 6, 2],
  "type": "column"
}, {
  "name": "Edmonton",
  "data": [0, 0, 16, 21],
  "type": "column"
}, {
  "name": "Surrey",
  "data": [0, 0, 16, 2],
  "type": "column"
}, {
  "type": "spline",
  "marker": {
    "lineWidth": 2,
    "lineColor": "red",
    "fillColor": "white"
  },
  "data": [0, 0, 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'
        });
      });
  }
}

【讨论】：