Highcharts：自定义渲染器的选项设置

debugcn 发表于 Dev

喜悦

我正在使用Highcharts绘制一些复杂的数字。

我像这样使用它：

var renderer = new Highcharts.Renderer(
            $('#container')[0], 400, 400
        );
for (var i = 0; i < data.length; i++) {
    plotItem(renderer, data[i]);
}

一个简化的例子是JSFiddle。

现在如何设置图表的选项？说，我想拥有默认的“导出”菜单，设置图表标题，等等。

同时，我想为每个项目的形状添加自定义的工具提示。像这里的东西。如何添加呢？

我莫名其妙地不能“钩”Highcharts.Renderer到Highcharts.Chart...

更新：

搜索之后，我通过Here连接Chart和Renderer对象。但是如何将自定义工具提示添加到矩形（当前我放置了警报）？

标记

我在API中看不到任何可让您“打开”所Renderer创建对象的工具提示的东西。在您提供的链接中，它们在Renderer对象附近创建点，然后mouseover对象的点通过该点。

您可以遵循该模式（将点映射到Renderer对象）：

function some(renderer) {
    renderer.rect(10, 10, 100, 100, 1).attr({
        fill: 'red'
     }).add().on('mouseover', function () {
                var chart = Highcharts.charts[0];
                var point = chart.series[0].points[0];
                chart.tooltip.refresh(point);
        })
            .on('mouseout', function () {
                var chart = Highcharts.charts[0];
                chart.tooltip.hide();
        });
}

在这里看小提琴。

或者，您可以直接更直接地操作工具提示：

function some(renderer) {
    renderer.rect(10, 10, 100, 100, 1).attr({
        fill: 'red'
    }).add().on('mousemove', function(e) {    
        Highcharts.charts[0].tooltip.move(e.pageX,e.pageY); // follow the mouse       
    }).on('mouseout', function(e) {
        Highcharts.charts[0].tooltip.hide(); // off the rect, hide it
    }).on('mouseover', function(e) {
        var tooltip = Highcharts.charts[0].tooltip;
        clearTimeout(tooltip.hideTimer); // if it was in the process of hiding, cancel
        tooltip.isHidden = false; // mark it as shown
        tooltip.label.attr({
                text: 'Hi Mom!' // add a label
        });
        tooltip.label.attr('opacity', 1).show(); // show it
    });
}

在这里查看更新的小提琴。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。