highcharts 正在显示少量折线图图例

rnmwe5a2  于 2022-11-11  发布在  Highcharts
关注(0)|答案(2)|浏览(195)

嗨,我使用的是8.0.0版本的折线图和 highcharts
我在这里观察到一个问题-我正在连续发送2个数据的数组,但图表仅显示一个图例,这将误导用户它只有一个数据-

this.dateHeaderArray = ['Jan 2021', 'Feb 2021', 'Mar 2021', 'Apr 2021', 'May 2021', 'Jun 2021', 'Jul 2021', 'Aug 2021', 'Sep 2021', 'Oct 2021', 'Nov 2021', 'Dec 2021'];

this.seriesDataArray = [
    {
        "name": "a_c5af-4825-86df-bc5_7161-4142-ad77-04d",
        "type": "line",
        "data": [ null,null,null,null,null,null,null, null, null, null,null,null],
        "point": {
            "events": {}
        }
    },
    {
        "name": "a_c5af-4825-86df-bc5_47b6-4616-a20b-dc3",
        "type": "line",
        "data": [ null,null,null,null,null,null,null, null, null, null,null,null],
        "point": {
            "events": {}
        }
    }
];
this.chartOptions = {
  title: {
    text: ''
  },
  legend: {
    enabled: true
  },
  credits: {
    enabled: false
  },
  tooltip: {
    pointFormat: '<b>{point.y:.3f}</b>'
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Score',
      style: {
        fontSize: '12px',
        fontFamily: 'Roboto',
        color: '#485465'
      }
    }
  },
  xAxis: {
    type: 'category',
    labels: {
      rotation: 0,
      style: {
        fontSize: '10px',
        fontFamily: 'Roboto',
        color: '#485465'
      },
    },
    categories: this.dateHeaderArray
  },
  series: this.seriesDataArray
};

有人能建议这一点,是版本问题或配置,如果它是版本问题,那么什么版本将工作适合我情况。
图像url-https://i.stack.imgur.com/j6t23.jpg

7kqas0il

7kqas0il1#

经过一番搜索,我找到了解决办法和得到错误结果的原因。
更新函数如何在highchart中工作-

update(options [, redraw] [, oneToOne] [, animation])

一个id选项被用来将新的选项集Map到一个现有的对象。2如果没有找到一个具有相同id的现有对象,则相应的项(在相同的索引中)被更新。3这里oneToOne扮演了一个很好的角色。4因为如果oneToOne为true,那么集合将被一对一地更新,并且项将被添加或删除以匹配新的更新选项。
[oneToOne]=“true”解决了如下问题-

<highcharts-chart [Highcharts]="Highcharts" [options]="chartOptions" [oneToOne]="true" [(update)]="gotScorecardData">
bpsygsoo

bpsygsoo2#

如果图形第一次按预期工作,但在更新后不工作,请尝试添加以下更新标志。

<highcharts-chart[Highcharts]="Highcharts"[options]="chartOptions"[(update)]="updateFlag"></highcharts-chart>

并在更新系列数据时将该标志设置为true。

this.updateFlag = true;

相关问题