Highcharts 中使用 Handlebars 的附加工具提示

Question

我有一个高图表，其中包含柱形图和样条图。数据集使用车把变量传递。代码是这样的

$(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, .........]

提前致谢

Answer 1

您可以定义自己的工具提示格式化程序，然后使用列数据点在输入“栏”数据中的位置来检索和显示来自 toolTipSuccess / toolTipFailure 的适当数据。考虑一下 series.tooltip 定义的这个 sn-p：

//... 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/

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

如您所见，这使用突出显示点的位置来查找所需数据在其他数据集中的位置。