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

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

您可以定义自己的工具提示格式化程序，然后使用输入“栏”数据中列数据点的位置来检索并显示 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 示例的粗略编辑)

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