系列名称在highcharts tootlip上无法正确显示

时间:2018-03-26 23:57:57

标签: angular highcharts

我使用角度4实现了一个whisker bloxplot高图。我试图在工具提示中显示正确的系列名称。尽管将正确的系列名称与系列一起传递,但它在鼠标悬停时无法正确显示。我有三个系列,所有系列都显示系列1.我需要显示以下名称

商业期权净成本 自我保险选择 专属期权净成本

enter image description here

父组件

import { Component, Input, OnInit } from '@angular/core';
import { NpvAnalysis, NpvAnalysisResult, createNpvAnalysisResult } from '../../../../shared/models/results';
import { ReactiveComponent } from '@wtw/toolkit/src/utils/base.component';

@Component({
  selector: 'app-net-present-value-analysis',
  templateUrl: './net-present-value-analysis.component.html',
})
export class NetPresentValueAnalysisComponent extends ReactiveComponent implements OnInit {
  isExpanded = false;
  showTable = true;
  showProjection = false;

  public selectedAnalysis: NpvAnalysis = null;

  @Input() set npvResults(value: Array<NpvAnalysis>) {
    this._npvResults = value;
    this.processResults();
  }

  public results: Array<NpvAnalysisResult> = [];
  private _npvResults: Array<NpvAnalysis> = [];

  constructor() {
    super();
  }

  ngOnInit() {
  }

  processResults() {
    if (!this._npvResults) {
      return;
    }

    this.results = this._npvResults.map((result: any) => {
      return createNpvAnalysisResult(result);
    });

  }

  showProjectionClick(i) {
    const results = this._npvResults[i];
    if (results) {
      this.selectedAnalysis = results;
      this.showProjection = true;
    }
  }

  hideProjection() {
    this.selectedAnalysis = null;
    this.showProjection = false;
  }
}

Bloxplot组件

import { Component, Input } from '@angular/core';

@Component({
    selector: 'app-box-plot-chart',
    template: '<chart [options]="options" (load)="getInstance($event.context)"></chart>',
    styles: [`
        chart{
              display: block;
              width: 100% !important;
              padding:0;
        }
    `]
})
export class BoxPlotChartComponent {

    public options: any;
    chart: any;

    @Input() public series: any;

    constructor() {

        this.options = {

            chart: {
                type: 'boxplot'
            },
            title: {
                text: ''
            },
            legend: {
                enabled: false
            },
             credits: {
                enabled: false
            },
            yAxis: {
                title: {
                    text: ''
                }, plotLines : false
            },
            tooltip: {
                  valueDecimals: 0,



              },
            series: [

            ]
        };
    }

    getInstance(chartInstance): void {
        this.chart = chartInstance;
        this.redraw();
    }


    ngOnChanges(data: any) {
        if (!data.series.currentValue || !this.chart) return;
        data.series.currentValue.map(s => {
            this.chart.addSeries(s);
        });
        this.chart.reflow();
    }

    redraw() {
        if (!this.chart) return;
        this.chart.addSeries(this.series);
    }

}

我将chartseries对象分配给图表的系列属性。它包含一个包含以下值的数据对象。除了系列名称,我可以做其他所有事情。我是否需要传递系列名称以及系列的一部分

color:"#C111A0"
high:-71767.9361577481
low:-71296.6466409404
median:-71516.2386928737
q1:-71456.5239243761
q3:-71569.3280927532
tooltip:"Captive View"

0 个答案:

没有答案