Question

我正在使用角度4，我想显示在我们加载页面时默认选择的系列1值，并且它应该始终显示没有鼠标悬停，但是当我鼠标悬停在第二个圆圈时它应该显示相应的值

 this.chart = new Chart({
        chart: {
            type: 'solidgauge',
            marginTop: 50,
            backgroundColor: 'transparent'
        },
        title: {
            text: 'Incremental Price Monitor',
            style: {
                fontSize: '24px',
                color: 'ghostwhite',
                display: 'none'
            }
        },
        credits: {
            enabled: false
        },
        tooltip: {
            borderWidth: 0,
            backgroundColor: 'none',
            shadow: false,
            style: {
                fontSize: '16px',
                color: 'ghostwhite'
            },
            // pointFormat: '<span style="font-size:5em; color: {point.color}; font-weight: bold">{point.y}%</span><br><span style="font-size:1em; color: {point.color}; font-weight: bold">{series.name}</span>',
            pointFormat: '<span style="font-size:2em; color: {point.color}; font-weight: bold">{point.y}mw</span>',
            positioner: function (labelWidth) {
                return {
                    x: 200 - labelWidth / 2,
                    y: 210
                };
            }
        },
        pane: {
            startAngle: 0,
            endAngle: 360,
            background: [{ // Track for Move
                outerRadius: '112%',
                innerRadius: '88%',
                backgroundColor: '#1B5795',
                borderWidth: 0
            }, { // Track for Exercise
                outerRadius: '87%',
                innerRadius: '63%',
                backgroundColor: '#33683C',
                borderWidth: 0
            }]
        },
        yAxis: {
            min: 0,
            max: 100,
            lineWidth: 0,
            tickPositions: []
        },
        plotOptions: {
            solidgauge: {
                dataLabels: {
                    enabled: false
                },
                linecap: 'round',
                stickyTracking: false
            }
        },
        series: [{
            name: 'Target Ramp',
            data: [{
                color: this.forecasted_he_target_generation_Color,
                radius: '112%',
                innerRadius: '88%',
                y: this.forecasted_he_target_generation
            }]
        }, {
            name: 'MW Actual',
            data: [{
                color: this.current_generation_Color,
                radius: '87%',
                innerRadius: '63%',
                y: this.current_generation
            }]
        }]
    });

Answer 1

您可以包装Tooltip.prototype.hide方法，这样工具提示就不会被隐藏，而是填充新的特定于点的内容。

Highcharts.wrap(Highcharts.Tooltip.prototype, 'hide', function (p, delay) {
  if (this.options.alwaysVisible) {
    return this.refresh(this.chart.series[0].data[0])
  }

   p.call(this, delay)
})



tooltip: {
  alwaysVisible: true,

示例：http://jsfiddle.net/uu4oLc0j/

Answer 2

ToolTip界面有一个原型＆＃39; hide＆＃39;您可以覆盖以停止工具提示在“徘徊”之后消失的功能。国家失去了。

这可以通过以下方式完成，

HighCharts.wrap(HighCharts.Tooltip.prototype, 'hide', function () {});

通常这个回调函数被配置为隐藏工具提示;但是，用NOOP覆盖它会禁用它。

您还可以使用Tooltip.refresh（）方法设置默认显示的工具提示，传入您想要显示的图表系列点 - 如下所示，

chart.tooltip.refresh(chart.series[1].points[2]);

通过阅读以下教程 - http://ahumbleopinion.com/customizing-highcharts-tooltip-visibility/

，查找有关完成此操作的更多信息

Answer 3

使用callbackFunction与图表绑定并覆盖函数并刷新工具提示

HTML：

<highcharts-chart [Highcharts]="chart" [options]="options" [callbackFunction]="save.bind(this)"></highcharts-chart>

在TS组件中：

save(chart:any) { chart.tooltip.hide = function(){ return; } var tooltipPoint = chart.series[0].points[0]; chart.tooltip.refresh(tooltipPoint); } }

Github问题 https://github.com/highcharts/highcharts-angular/issues/68

highcharts活动量表需要显示第一个系列数据而无需鼠标悬停

3 个答案: