首页 > 解决方案 > 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>

我得到的响应数据如下:

响应数据

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

响应数据系列

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

这里的问题是,工具提示中 pointFormat 的 series.name 中的第一个值显示为 nil,名称显示如下图所示。请帮我找出哪里出错了。

在此处输入图像描述

标签: javascriptvue.jshighcharts

解决方案


推荐阅读