数据和工具提示不能用于使用高图的图形
Data and tooltip not working for graph using highcharts
我试图得到一个基本的柱状图工作,我将趋势maphours(y轴),reducehours(y轴)为特定的工作(工具提示)在特定的一天(x轴)。
我正在用y轴值和jobname值填充数据数组,我希望在工具提示中显示这些值。x轴值是一个日期戳(一个日值,即x轴上的一个日期)。
问题-图形容器正在启动,但它没有拾取y轴值和工具提示。
填充数组的代码-
var obj = data;
var jobSummaryMappersPT = [];
var jobSummaryReducersPT = [];
var jobSummaryMappersDB = [];
var jobSummaryReducersDB = [];
var datestamp = [];
for(i=0;i<obj.length-1;i++){
if(obj[i].grid=='PT'){
jobSummaryMappersPT.push({mappers: obj[i].maphours, jobname: obj[i].jobname}); // Filling of Array after Ajax Call
jobSummaryReducersPT.push({reducers: obj[i].reducehours, jobname: obj[i].jobname}); //Filling of Array
datestamp.push(obj[i].date.replace('T00:00:00.000Z', ' '));
}else{
jobSummaryMappersDB.push({mappers: obj[i].maphours, jobname: obj[i].jobname}); // Filling of Array after Ajax Call
jobSummaryReducersDB.push({reducers: obj[i].reducehours, jobname: obj[i].jobname}); //Filling of Array
}
}
job_summary_chart(jobSummaryMappersPT, jobSummaryReducersPT, jobSummaryMappersDB, jobSummaryReducersDB, datestamp);
初始化Highcharts的函数-
function job_summary_chart(jobSummaryMappersPT, jobSummaryReducersPT, jobSummaryMappersDB, jobSummaryReducersDB, datestamp){
$(function () {
$('#job_summary_pt').highcharts({
// Other Highchart Properties
chart: {
type: 'column'
},
title: {
text: 'Job Summary',
x: -20 //center
},
subtitle: {
text: 'Source: DFTBA',
x: -20
},
xAxis: {
categories: datestamp,
labels: {
rotation: -45,
y: 30,
align: 'center',
step: 4
}
},
yAxis: {
title: {
text: 'GbHrs'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: ' GbHrs',
formatter: function() { return ' ' +
'Jobname: ' + this.point.jobname + '<br />'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
data: jobSummaryMappersPT
},{
data: jobSummaryReducersPT
}]
});
我对jobSummaryMappersPT做了console.log,值如下:
[Object { mappers=97, jobname="abcd.pig"},
Object { mappers=33, jobname="abcd.pig"},
Object { mappers=31, jobname="abcd.pig"},
Object { mappers=15, jobname="abcd.pig"},
Object { mappers=15, jobname="abcd.pig"},
Object { mappers=12, jobname="abcd.pig"}]
我认为问题是在映射器和jobname之后的"="符号。在数据属性中,它接受冒号= ":",这就是为什么图形不拾取值?
我如何解决这个问题,让图形工作?并获得工具提示以显示jobname?
如果我理解正确,您的问题不仅是工具提示,图表甚至无法呈现您的数据。您将mappers
和reducers
设置为Y值的属性名称,但是 highcharts如何知道这些属性应该选择Y值?
将属性mappers
和reducers
更改为y
应该可以工作:
jobSummaryMappersPT.push({y: obj[i].maphours, jobname: obj[i].jobname}); // Filling of Array after Ajax Call
jobSummaryReducersPT.push({y: obj[i].reducehours, jobname: obj[i].jobname}); //Filling of Array
tooltip的代码看起来不错
相关文章:
- 动态更改高图中的系列颜色
- 如何为高图中的区域线创建z索引
- 将高图饼图中的文本居中显示为响应
- 可以对一个图表进行高图深化,反映在另一个图表上
- 如何将数据标签与数据一起传递,以便在高图中的工具提示中显示
- 如何在悬停时更改高图的不透明度
- 升级到 jQuery 1.8 后出现高图缩放问题
- 高图3.0.7是否允许高图
- 指定饼图高图的颜色
- 如何防止高图工具提示弹出隐藏,在图形区域或浏览器窗口上调整大小
- 高图点击显示更大的图形
- 高图-多轴图形不显示标签
- 如何仅显示带有高图的图形
- 高图下载多个图形在单独的页面
- 高图不显示具有多个y轴的图形的序列数据
- 向高图图形添加自定义徽标
- 在高图的工具提示中创建图形
- 数据和工具提示不能用于使用高图的图形
- 高图区域图隐藏图形与一个数据点
- 高图图形中的输入字段