javascript - 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,名称显示如下图所示。请帮我找出哪里出错了。
解决方案
推荐阅读
- javascript - 如何在 React Native 中从服务器获取数据之前渲染加载器
- sql - 分析几个表中的字段名
- angular - Angular-Slickgrid:并非所有过滤器都出现在标题行中
- c++ - vulkan-hpp 中奇怪的 C++ 语法
- javascript - 外部javascript可以在网站上访问什么。出于安全原因询问
- http - IdHttp 返回 HTTP 1.1/ 403 Forbidden。HttpClient 工作正常
- c# - Windows MSI 安装程序:依赖解析不起作用,安装了错误的程序集
- java - 一段时间后,Coldfusion 停止使用 smtp.gmail.com 发送电子邮件
- c# - System.ArgumentNullException: '值不能为空。参数名称:items'
- vue.js - 如果出现身份验证问题,如何通过查询重复操作?