Question

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

我用它像：

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

简化案例是JSFiddle。

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

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

我无法将Highcharts.Renderer“挂钩”到Highcharts.Chart ...

更新：

搜索后，我按Here连接图表和渲染器对象。但是如何向矩形添加自定义工具提示（目前我提醒）？

Answer 1

我在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();
        });
}

请参阅小提琴here。

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

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
    });
}

请参阅更新的小提琴here。

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

1 个答案: