高图表工具提示显示额外数据
Highcharts tool-tip show extra data
我正在尝试将数据添加到高图表中的工具提示中。我使用 CSV 导入数据,但对于此代码,我将数据放在变量中。通常,我的数据的格式为:CSV中的名称,开始日期,结束日期。现在我想尝试使用:名称,开始日期,结束日期,事件类型,单位类型。
我正在尝试弄清楚如何让我的数据事件类型和单位类型显示在工具提示中。我确实尝试将数据推送到series.data.composition,但我想我做错了!
作为奖励,只有 1 天宽的日期似乎没有显示,但它们就在那里,只是太薄了,看不到,有人知道解决方案吗?我围绕这个主题进行了一段时间的黑客攻击,但似乎没有帮助。
这是我的JSFiddle代码。
var options = {
chart: {
zoomType: 'y',
borderWidth: '0',
borderRadius: '15',
renderTo: 'container',
inverted: true,
backgroundColor: {
linearGradient: [0, 0, 500, 500],
stops: [
[0, 'rgb(44, 44, 58)'],
[1, 'rgb(62, 62, 62)']
]
},
plotBackgroundColor: 'rgba(255, 255, 255, .9)'
},
tooltip: {
useHTML: true,
formatter: function () {
var point = this.point;
return '<table><tr>' + point.category + '</tr><tr><td style="color:#00CC00">Start:</td><td style="text-align: right">' + Highcharts.dateFormat('%b %e, %Y', point.low) + '</td></tr><tr><td style="color:#FF0000">Finish:</td><td>' + Highcharts.dateFormat('%b %e, %Y', point.high) + '</td></tr><tr><td>Unit:</td> <td></tr></table>'
}
},
subtitle: {
text: 'MTC'
},
credits: {
text: 'MTC',
href: 'myLink'
},
legend: {
enabled: true
},
title: {
text: 'Calendar'
},
xAxis: {
categories: []
},
plotOptions: {
series: {
grouping: false
}
},
yAxis: {
type: 'datetime',
minRange: 0,
startOnTick: false,
endOnTick: false,
title: {
text: 'yAxis'
}
},
series: []
},
categories = [];;
var data = "Soldier 1,12/1/2013,12/10/2013,Training 1,Unit 1,4/8/2014,4/10/2014,Training 3,Unit 7'nSoldier 2,4/15/2013,4/18/2013,Training 2,Unit 2,4/20/2014,4/23/2014,Training 4,Unit 8'nSoldier 3,6/3/2013,6/3/2013,Training 31,Unit 3,8/12/2014,8/13/2014,Training 66,Unit 9,6/15/2013,6/22/2013,Train 92,Unit 44'nSoldier 4,10/10/2013,10/12/2013,Training 9,Unit 4,10/13/2013,10/19/2013,Training 6,Unit 10'nSoldier 5,9/20/2013,9/24/2013,Training 5,Unit 5";
var lines = data.split(''n');
$.each(lines, function (lineNo, line) {
var items = line.split(','),
iLen = items.length,
series = {
type: 'columnrange',
data: [],
name: items[0],
composition: []
};
categories.push(items[0]);
for (var i = 1; i < iLen; i += 2) {
var from = (new Date(items[i])).getTime(),
to = (new Date(items[i + 1])).getTime();
if (!isNaN(from) && !isNaN(to)) {
series.data.push([lineNo, from, to]);
}
};
options.series.push(series);
});
options.xAxis.categories = categories;
var chart = new Highcharts.Chart(options);
您对新数据推送和格式化程序的摆弄:http://jsfiddle.net/WXLaN/2/
需要注意的关键是数据推送循环:
for (var i = 1; i < iLen; i += 4) {
var from = (new Date(items[i])).getTime(),
to = (new Date(items[i + 1])).getTime();
var point = {
x: lineNo,
low: from,
high: to,
event: (items[i + 2]),
unit: (items[i + 3])
};
if (!isNaN(from) && !isNaN(to)) {
series.data.push(point);
}
};
由于数据线现在是 4 个数据块,因此 inc 设置为 4。为了使用自定义数据字段,您需要推送一个包含所需信息和附加信息的对象。您需要的信息是X,低和高。额外的信息是事件和单位。所有这些内容都可以在 point.options 对象的格式化程序中使用,并且由您在数据推送循环中提供给它们的相同内容引用。
相关文章:
- 如何将json数据显示为html
- 解耦按钮(两个按钮同时切换),并根据数据显示相应的按钮
- 将json提要数据显示为html
- 使用Ajax Get方法将数据显示到特定元素中
- 如何将数据显示为线性highChart
- Json显示来自网站的数据显示仅未定义
- 使 ajax 请求和成功数据显示在 id <选择>选择>部分中
- 在按钮单击时将图像URL数据显示到弹出框中,而无需禁用背景
- 如何在循环中将 json 数据显示为 HTML
- 如何使用javascript在html中将firebase数据显示为列表
- PHP同时循环数组数据显示到javascript中
- 原始图像数据显示
- 如何在 y 轴上将数据显示为 KB、MB、GB、TB
- Ajax 数据显示在包含 10 行的表中
- 如何让 Mathjax.js 与 ANCII.js 将附加的 json 数据显示为正确的公式
- 调用 Worklight 适配器并将列表视图中的 JSON 数据显示为字符串
- Jquery/Javascript Datatables : 如何在行选择时将行数据显示到 html 文本字段中
- 双击 td 时,如何在警告框中将数据库中的数据显示为 html 表
- 日期之间的数据显示所有头
- 如何使用模板中的数据显示谷歌地图