使用Handlebars的Highcharts中的其他工具提示

Additional tooltip in Highcharts using Handlebars

本文关键字：其他 工具提示 Highcharts Handlebars 使用      更新时间：2024-05-02

我有一个highcharts图，其中既有列图，也有样条曲线图。数据集是使用handlebas变量传递的。代码就像这个

$(function () {
$('#container').highcharts({
    title: {
        text: '',
        style: {
            color: '#cc0000',
            fontWeight: 'bold'
        }
    },
    xAxis: {
        categories: [{{{xaxisLabel}}}]
    },
     yAxis: [{ /* Primary yAxis */
        labels: {
            format: '{value}%',
            style: {
                color: '#cc0000'
            }
        },
        title: {
            text: 'Failure Percentage',
            style: {
                color: '#cc0000'
            }
        }
    }, { /* Secondary yAxis */
        title: {
            text: 'Success Percentage',
            style: {
                color: '#009900'
            }
        },
        max: 100, 
        labels: {
            format: '{value} %',
            style: {
                color: '#009900'
            }
        },
        opposite: true
    }],
    labels: {
        items: [{
            html: '',
            style: {
                left: '2px',
                top: '18px',
                color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
            }
        }]
    },
    credits: {
      enabled: false
    },
    series: [{
        type: 'column',
        name: 'Success',
        color: Highcharts.getOptions().colors[2],
        yAxis: 1,
        tooltip: {
            valueSuffix: ' %'
        },
        data: [{{barSuccess}}]
    }, {
        type: 'spline',
        name: 'Failure',
        tooltip: {
            valueSuffix: ' %'
        },
        data: [{{barFailure}}],
        marker: {
            lineWidth: 3,
            lineColor: Highcharts.getOptions().colors[8],
            fillColor: 'red'
        }
    }]
});
});

现在，我又有两个数据集，分别称为｛｛toolTipSuccess｝｝和｛｝toolTipFailure｝。

｛｛toolTipSuccess｝｝在柱状图中，｛{toolTipFailure｝在样条曲线图中。

我希望这两个数据集中的数据在各自的图中作为工具提示。我知道如果我在图中以（x，y，z）格式传递数据，这是可以做到的，但我必须做大量的代码更改来适应我正在避免的情况。

有人知道这个问题有什么迂回之处吗？

变量中的数据属于以下类型：-

{{barSuccess}} = [100, 99, 99, 99 .........]
{{barFailure}} = [ 0, 0, 1, 0.3........]
{{toolTipSuccess}} = [363, 763, 762, 987, ........]
{toolTipFailure}} = [12, 3, 13, 8, .........]

提前感谢

您可以定义自己的工具提示格式化程序，然后使用列数据点在输入"bar"数据中的位置来检索和显示来自toolTipSuccess/toolTipFailure的适当数据。考虑一下这个系列的片段。工具提示定义：

//... more series definition
tooltip: {
  pointFormatter: function(){
    return "Rainfall: " + this.y + ", success: " + successPoints[this.series.data.indexOf( this )] + "<br />";
  } 
}
//... more code
var successPoints = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

JSfiddle在这里：http://jsfiddle.net/L2ncbenx/1/

（抱歉，这是对现有高点示例的粗略编辑）

正如您所看到的，这使用高亮显示点的位置来查找其他数据集中所需数据的位置。

相关文章：