Highcharts 角度包装器标签。项目不刷新

Question

我在 2.4.0 版本中使用 angular6 和 office highcharts 角度包装器 (https://github.com/highcharts/highcharts-angular)。

除了可以手动放置在图表上的标签之外，一切都运行良好。

我只是无法让他们刷新。 我有一个可以通过后端过滤的图表。当我获得新生成的数据时，我将在 html 中使用的 chartOptions 中的数据更新为角度组件的[options]="chartOptions"。

chartOptions 是从我的默认类中实例化的，如下所示：this.chartOptions = new GraphConfigSeqAtteptedVsAchived().chartOptions;

类如下所示： `import * as Highcharts from 'highcharts';

导出类 GraphConfigSeqAtteptedVsAchived{ 公共图表选项：任何；

constructor(){
    this.chartOptions = {
    chart: {
        height: 600,
        width: 620,
        events:{load: function(){
            this.myTooltip = new Highcharts.Tooltip(this, this.options.tooltip);         
            }
        },
        backgroundColor: 'transparent',
    },
    credits: {
        text: 'charname',
        href: ''
    },
    labels: {

    },
    exporting:{
        chartOptions:{
            title: {
                text:'not set',
                style:{
                    color: '#000000'
                },
                margin: 0
            }
        }
    },
    tooltip: {
        enabled: false
    },
    xAxis: {
        min: -10,
        max: 0,
        width: 535,
        title: {
            text: 'Rainfall (mm)',
            style: {
                fontWeight: "bold",
                color: '#000000'
            }
        },
        reversed: true,
        tickInterval: 1
    },
    yAxis: {
        min: -10,
        max: 0, 
        title: {
            text: 'Rainfall (mm)',
            style: {
                fontWeight: "bold",
                color: '#000000'
            }
        },
        reversed: true,
        tickInterval: 1
    },
    title: {
        text: ' as',
        margin: 0,
        style:{
            color: 'transparent'
        }
    },
    legend: {
        layout: 'vertical',
        align: 'left',
        verticalAlign: 'top',
        x: 100,
        y: 90,
        floating: true,
        backgroundColor: '#FFFFFF',
        borderWidth: 1,
        navigation: {
            enabled: false
        }
    },
    plotOptions: {
        scatter: {
            stickyTracking: false,
            allowPointSelect: true,
            marker: {
                radius: 3,
                states: {
                    hover: {
                        enabled: true,
                        lineColor: 'rgb(100,100,100)'
                    }
                }
            },
            tooltip: {
                headerFormat: '<b>{series.name}</b><br>',
                pointFormat: '',
                hideDelay: 500
            },
            symbol: "circle",
            events: {

                mouseOut: function() {
                    this.chart.myTooltip.hide();
                    this.chart.myTooltip.options.enabled = false;
                },
                mouseOver: function() {
                    if(this.halo) {
                        this.halo.attr({
                           'class': 'highcharts-tracker' 
                        }).toFront();   
                    }
                },
                click: function(event) {
                    this.chart.myTooltip.options.enabled = true;
                    this.chart.myTooltip.refresh(event.point, event);
                }                  
            }  
        },
        line:{
            events: {
                legendItemClick: function () {
                    return false; 
                }
            }
        },
        series:{
            allowPointSelect: true
        }

    },
    series: [{
        type: 'line',
        data: [[30, 30], [-30, -30]],
        marker: {
            enabled: false
        },
        states: {
            hover: {
                lineWidth: 1
            }
        },      
        showInLegend: false,    
        color: "rgba(0, 0, 0, 0.6)",
        enableMouseTracking: false
    },{
        type: 'line',
        data: [[30, 29.5], [-29.5, -30]],
        marker: {
            enabled: false
        },
        states: {
            hover: {
                lineWidth: 0
            }
        },          
        showInLegend: false,
        dashStyle: 'ShortDash',
        color: "rgba(125, 162, 159, 0.35)",
        enableMouseTracking: false
    },{
        type: 'line',
        data: [[29.5, 30], [-30, -29.5]],
        marker: {
            enabled: false
        },
        states: {
            hover: {
                lineWidth: 0
            }
        },
        showInLegend: false,
        dashStyle: 'ShortDash',
        color: "rgba(125, 162, 159, 0.35)",
        enableMouseTracking: false
    },{
        type: 'line',
        data: [[29, 30], [-30, -29]],
        marker: {
            enabled: false
        },
        states: {
            hover: {
                lineWidth: 0
            }
        },
        showInLegend: false,
        dashStyle: 'ShortDash',         
        color: "rgba(197, 144, 161, 0.35)",
        enableMouseTracking: false
    },{
        type: 'line',
        data: [[30, 29], [-29, -30]],
        marker: {
            enabled: false
        },
        states: {
            hover: {
                lineWidth: 0
            }
        },
        showInLegend: false,
        dashStyle: 'ShortDash',
        color: "rgba(197, 144, 161, 0.35)",
        enableMouseTracking: false
    }]
}
}

}`

生成的数据在打字稿中动态添加，所有这些都可以正常工作。在我为 [(update)]="updateGraph" 设置 updateFlag 后，一切都被刷新了。轴标题也很好。

对我来说唯一没有刷新的是我动态添加到图表中的标签，如下所示： let labelTotalNumberOfEyes = { html : this.translate.instant('GRAPHS.TOTAL_NUMBER_OF_EYES') + ': ' + (scatterSeries.data.length + scatterSeriesRetreatment.data.length), style : { left : '330px', top : '368px', fontSize : '14px', backgroundColor: '#FFFFFF', borderWidth: 1, } }
this.chartOptions.labels.items.push(labelTotalNumberOfEyes);

有人知道我做错了什么吗？除了设置此更新标志之外，我没有看到任何其他选项，它适用于除标签之外的所有内容。

如果您遗漏任何信息，请告诉我。

提前致谢。

Answer 1

这个问题实际上是一个 Highcharts 错误。我已经在这里报告了：https://github.com/highcharts/highcharts/issues/10429。

作为一种解决方法，您可以使用Highcharts.SVGRenderer 添加自定义标签并将对它的引用存储在您的组件中。接下来，更新时，在标签（Highcharts.SVGElement）上调用attr() 方法并设置新选项。检查下面发布的演示和代码。

在图表回调上添加标签：

  constructor() {
    const self = this;

    this.chartCallback = chart => {
      self.chart = chart;

      self.label = chart.renderer
        .text("test", 100, 100)
        .css({
          fill: "#555",
          fontSize: 16
        })
        .add()
        .toFront();
    };
  }

更新时在标签上调用 attr()：

  update_chart() {
    const self = this,
      chart = this.chart;

    chart.showLoading();
    setTimeout(() => {
      chart.hideLoading();

      self.chartOptions.series = [
        {
          data: [10, 25, 15],
          name: "updatedSerieName"
        }
      ];
      self.chartOptions.yAxis.title.text = "updatedData";

      self.label
        .attr({
          text: "test1",
          x: 150,
          y: 120
        })
        .css({
          fill: "red",
          fontSize: 20
        });

      self.updateFromInput = true;
    }, 2000);
  }

演示：

• https://codesandbox.io/s/8zo0yvqqwj

API 参考：

• https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text

• https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr