tooltip.pointFormat在Vue中显示为nil

问题描述

我正在使用highcharts基本列类型图在vue应用程序中的图中显示数据。但是我面临一个问题，series.name不会显示数据的第一个值的名称。以下是问题的代码和屏幕截图。请帮助我找出问题所在。

我添加了一个调试器并显示我得到的响应。请检查。

<script>
  import {Chart} from 'highcharts-vue';

  export default {
    components: {
      highcharts: Chart
    },data: function() {
      return {
        chartOptions: {
          chart: {
            type: 'column'
          },xAxis: {
            categories: [],crosshair: true
          },yAxis: {
            min: 0,title: {
              text: 'Reporting'
            }
          },legend: {
            enabled: false
          },title: {
            text: ''
          },tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
              '<td style="padding:0"><b>{point.y}</b></td></tr>',footerFormat: '</table>',shared: true,useHTML: true
          },plotOptions: {
            column: {
              pointPadding: 0.2,borderWidth: 0
            }
          },series: [{
            name: '',data: []
          }]
        }
      }
    },created: function () {
      this.fetchReports();
    },methods: {
      fetchReports: function () {
        var that = this;
        url = '/my_views/reports.json'
        this.$axios.get(url)
        .then(response => {
          that.chartOptions.xAxis.categories = response.data.dates;
          that.chartOptions.series = response.data.series;
          debugger
        });
      }
    }
  };
</script>

我得到的响应数据如下：

response.data

=> {series: Array(3),dates: Array(4)}

response.data.series

{data: [0,2,1,0],name: "Wills"}
{data: [0,name: "Vicky"}
{data: [0,6,name: "Jamie"}

这里的问题是，在工具提示中pointFormat的series.name中，对于其余的第一个值，它显示为nil，如下图所示，该名称显示出来。请帮助我找出问题所在。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）