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

Question

我有一个 highcharts 图，其中包含柱状图和样条图。数据集使用 handlebars 变量传递。代码是这样的

$(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

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

//... 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 示例的粗略编辑）

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

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

Additional tooltip in Highcharts using Handlebars

javascript

graph

tooltip

highcharts

handlebars.js