组合highchart图在vue中不起作用

Posted 2023-02-22

【中文标题】组合highchart图在vue中不起作用

【英文标题】：Combination highchart graph not working in 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 中提取，现在它正在工作。谢谢你

【参考方案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'
        );
      );