Question

我正在使用Highcharts。任何人都可以告诉我如何为同一系列的不同点分配不同的工具提示后缀值吗？要显示工具提示，请执行以下操作：this.X:this:y this.suffix value

我使用下面的代码来绑定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);

例如：对于温度图，我在图中显示10个点，但不同的点具有不同的测量单位，如华氏温度和温度曲线。摄氏度。我将测量单位作为点值后缀传递。

但在我的情况下，最后应用的值后缀应用于同一系列的所有点。

我想按照他们的测量单位/值后缀（例如，15/5/2014 Temp 90°C）获得工具提示。

Answer 1

你可以尝试这样的事情

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
            }

Answer 2

您可以使用tooltip formatter并自定义工具提示的内容，包括条件和自定义逻辑。

Answer 3

您好我尝试使用以下方式使用工具提示格式化程序

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
                                        }
                                    });

高清工具提示问题

3 个答案: