Question

我有一个highcharts图，其中包含列和样条图。使用把手变量传递数据集。代码就像这样

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

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

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

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

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

1 个答案: