Highcharts Highchart工具提示问题
我用的是海图。 有人能告诉我如何为同一系列的不同点指定不同的工具提示后缀值吗? 显示工具提示,如:Highcharts Highchart工具提示问题,highcharts,Highcharts,我用的是海图。 有人能告诉我如何为同一系列的不同点指定不同的工具提示后缀值吗? 显示工具提示,如:this.X:this:y this.suffix值 我正在使用以下代码绑定Highcharts: var options = { chart: { height: 122, width: 387, type: 'line', borderWidth: 1, borderColor: '#EBBA95',
this.X:this:y this.suffix值
我正在使用以下代码绑定Highcharts:
var options = {
chart: {
height: 122,
width: 387,
type: 'line',
borderWidth: 1,
borderColor: '#EBBA95',
borderRadius: 1
},
credits: {
enabled: false
},
title: {
text: titleText
},
subtitle: {
text: subtitletext
},
xAxis: {
title: {
text: xAxistitle
},
categories: [],
labels: { enabled: false }
},
yAxis: {
title: {
text: yAxistitle
},
labels: { enabled: true },
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
plotOptions: {
line: {
dataLabels: {
enabled: false,
style: {
textShadow: '0 0 3px white, 0 0 3px white'
}
},
events: {
legendItemClick: function () {
return false; // <== returning false will cancel the default action
}
},
showInLegend: true,
enableMouseTracking: true
},
/* tooltip: {
shared: true
//,
//formatter: function ()
//{
// return 'The value for <b>' + this.x + '</b> is <b>' + this.y + '</b>, in series ' + this.series.valueSuffix;
//}
},*/
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} KKKK </b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
var series = this.series;
for (var count = 0; count < series.options.data.length; count++) {
var IndexOfSelectedDataValue = series.options.data.indexOf(this.y);
var IndexOfSelectedIDValue = series.options.vitalid[IndexOfSelectedDataValue];
var URL = CrmServerURL + 'main.aspx?etc=' + vitalsEntityObjectTypeCode + "&pagetype=entityrecord&id=%7b" + IndexOfSelectedIDValue + "%7D";
PIH.PIHClass.OpenUrl(URL);
break;
}
}
}
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [],
navigation: {
buttonOptions: {
enabled: false
}
}
};
seriesdata1.reverse();
seriesdata2.reverse();
var StartDate = seriesdata1[0].date;
var EndDate = seriesdata1[seriesdata1.length - 1].date;
document.getElementById("Fromdate").innerHTML = StartDate;
document.getElementById("Todate").innerHTML = EndDate;
if (seriesdata1.length > 0) {
options.series.push({ name: '', data: [], tooltip: '', vitalid: [] }); /// add new series
for (i = 0; i < seriesdata1.length; i++) {
options.xAxis.categories[i] = seriesdata1[i].date;
}
for (i = 0; i < seriesdata1.length; i++) {
options.series[0].name = seriesdata1[i].name;
options.series[0].data[i] = seriesdata1[i].data;
options.series[0].tooltip = seriesdata1[i].tooltip;
options.series[0].vitalid[i] = seriesdata1[i].vitalid;
}
}
if (seriesdata2.length > 0) {
options.series.push({ name: '', data: [], tooltip: '', vitalid: [] }); /// add new series
for (i = 0; i < seriesdata2.length; i++) {
options.series[1].name = seriesdata2[i].name;
options.series[1].data[i] = seriesdata2[i].data;
options.series[1].tooltip = seriesdata2[i].tooltip;
options.series[1].vitalid[i] = seriesdata2[i].vitalid;
}
}
$("#canvas").highcharts(options);
var选项={
图表:{
身高:122,
宽度:387,
键入:“行”,
边框宽度:1,
边框颜色:'#EBBA95',
边界半径:1
},
学分:{
已启用:false
},
标题:{
正文:titleText
},
副标题:{
文本:字幕文本
},
xAxis:{
标题:{
文本:xAxistitle
},
类别:[],
标签:{enabled:false}
},
亚克斯:{
标题:{
文本:yAxistitle
},
标签:{enabled:true},
绘图线:[{
值:0,
宽度:1,
颜色:'#808080'
}]
},
打印选项:{
行:{
数据标签:{
启用:false,
风格:{
textShadow:'0 0 3px白色,0 0 3px白色'
}
},
活动:{
legendItemClick:函数(){
返回false;//0){
options.series.push({名称:'',数据:[],工具提示:'',vitalid:[]});///添加新系列
对于(i=0;i0){
options.series.push({名称:'',数据:[],工具提示:'',vitalid:[]});///添加新系列
对于(i=0;i
例如:对于温度图,我在图中显示了10个点,但不同的点有不同的测量单位,如华氏度和摄氏度。我将测量单位作为点值后缀传递
但在我的例子中,最后一个应用值后缀应用于同一系列的所有点
我希望工具提示符合其测量单位/值后缀(例如,2014年5月15日温度90°C)。您可以尝试类似的方法
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
}
工具提示:{
headerFormat:“{point.key}”,
pointFormat:“{series.name}:”+
“{point.y}”,
页脚格式:“”,
分享:是的,
useHTML:true
}
您可以使用和自定义工具提示的内容,包括条件和自定义逻辑。您好,我尝试了以下方式使用工具提示格式化程序
if (TooltipMeasureunit != '') {
Tempdata.push({ name: 'Temp', vitalid: response[count].attributes.ccx_vitalsid.value, data: Temperature, date: RecordDate,
tooltip: {
formatter: function () {
return valueSuffix = this.TooltipMeasureunit
}
}
});
}
else if (TooltipMeasureunit == '') {
Tempdata.push({
name: 'Temp', vitalid: response[count].attributes.ccx_vitalsid.value, data: Temperature, date: RecordDate,
tooltip: {
formatter: function () {
return valueSuffix=this.TooltipMeasureunit
}
//shared: false
}
});
您好,Jaydip,您能介绍一下您的预期输出和代码吗?您能用一些技巧建议一下,这个工具提示格式化程序如何用于更改valusuffix的值,您可以查看我下面的代码