正在显示一些折线图的图例

发布于 2025-01-10 05:45:55 字数 1587 浏览 0 评论 0原文

您好,我正在使用折线图和 highcharts 版本 8.0.0

我在这里观察到一个问题 - 我正在连续发送 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
};

有人可以对此提出建议吗,是版本问题还是配置问题,如果是版本问题,那么哪个版本会适合我的情况。

图片网址 - https://i.sstatic.net/j6t23.jpg

Hi I am using line chart and highcharts version 8.0.0

i observe one issue here-
I am sending array of 2 data in series but graph is showing only one legend which will misguide to user that it has only one data-

    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
};

can someone suggest on this , is that version issue or configuration and if it is version issue then what version will work proper for my case.

image url- https://i.sstatic.net/j6t23.jpg

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

往事风中埋 2025-01-17 05:45:55

经过一番搜索,我找到了解决方案以及得到错误结果的原因。

更新功能如何在 highchart 中工作 -

更新(选项[,重绘] [,oneToOne] [,动画])

id 选项用于将新选项集映射到现有对象。如果未找到相同 id 的现有对象,则更新相应的项(位于同一索引中)。
这里oneToOne就发挥了很好的作用。因为如果 oneToOne 为 true,则集合将一对一更新,并且将添加或删除项目以匹配新的更新选项。

[oneToOne]="true" 已解决如下问题 -

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

after some search I found the solution and the reason of getting wrong result.

how the update function work in highchart -

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

an id option is used to map the new option set to an existing object. If an existing object of the same id is not found, the corresponding item (which is in same index) is updated.
Here oneToOne play a good role. since if oneToOne is true then collections will be updated one to one, and items will be either added or removed to match the new updated options.

[oneToOne]="true" has solved the issue like below -

<highcharts-chart [Highcharts]="Highcharts" [options]="chartOptions" [oneToOne]="true" [(update)]="gotScorecardData">
梦中的蝴蝶 2025-01-17 05:45:55

如果图表第一次按预期工作并且在更新后不工作,请尝试添加更新标志,如下所示。

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

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

this.updateFlag = true;

If the graph is working as expected for the first time and not working post update, try adding update flag as below.

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

And set the flag to true whenever you are updating the series data.

this.updateFlag = true;
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文