-1

我正在使用角度 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
            }]
        }]
    });
4

3 回答 3

2

使用 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

于 2018-09-06T12:38:33.657 回答
0

您可以包装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/

于 2017-07-10T14:49:48.280 回答
0

工具提示界面有一个原型“隐藏”功能，您可以覆盖该功能以阻止工具提示在“悬停”状态丢失后消失。

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

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

通常这个回调函数被配置为隐藏Tooltip；但是，用 NOOP 覆盖它会禁用它。

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

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

通过阅读以下教程找到更多信息 - http://ahumbleopinion.com/customizing-highcharts-tooltip-visibility/

于 2017-07-13T20:04:17.660 回答