gpt4 book ai didi

Angular Highcharts - 如何启用 noData 选项并动态更新它

转载 作者:行者123 更新时间:2023-12-03 23:21:39 26 4
gpt4 key购买 nike

我在本地使用以下 highcharts 依赖项:

  • “Angular Highcharts ”:“5.2.12”
  • “highcharts”:“6.1.0”
  • “@types/highcharts”:“5.0.19”

  • 这里是直播 demo我的源代码,

    首先我想指出 noData 的使用和启用highCharts 的功能非常阴暗。在任何地方都没有关于如何正确使用它的适当指南。

    现在谈到这个问题,几天前我意识到需要显示一个适当的“无可用数据”消息,而不是显示空图表。我做了一些研究,发现它可以在 highcharts 中启用,并在纯 JavaScript 中找到了它的工作演示。那么现在我们如何在 Angular 5 中使用它呢?这需要更多的研发,最后我想通了,
    import * as noDataToDisplay from 'highcharts/modules/no-data-to-display.src';
    ...
    @NgModule({
    ...
    providers: [
    { provide: HIGHCHARTS_MODULES, useFactory: () => [noDataToDisplay] }
    ]

    (注意:^^ 这种方法不适用于链接的 stackBlits 演示,不知道为什么!)

    我确实使用上述方式在我的仓库中成功地在本地启用了它,但它并不健壮,即它并没有始终如一地出现。

    接下来我想动态切换 noData 消息,即以编程方式更新它,所以我尝试了以下方法:
    const options = this.chartConfig.ref.options;
    options.lang.noData = `no data from: ${chartData.customMsgFromDate} to ${chartData.customMsgEndDate}.`;
    this.chartConfig.ref.update(options, true);

    当您从图例框中切换系列的可见性时,这确实有效,但现在这似乎也不起作用。我有以下问题,
  • 使用 Angular 5 的 noData 选项的正确方法是什么?
  • 如何确保它始终如一地出现? 可能不同的配置,如 setData([]) 或 setData(null) 使其始终出现,但我无法找出其不一致背后的根本原因。
  • 如何动态切换 noData 消息。

  • 另外,如果有什么我可以改进的,请告诉我,提前谢谢。

    PS 我确实设法找到了这个 fiddle关于使用纯 JavaScript 实现目标,但无法使用 angular highcharts 实现任何目标。这是 fiddle 似乎正在使用的附加代码。
    if (!chart.hasData()) {
    chart.hideNoData();
    chart.showNoData("Your custom error message");
    }

    可能这些方法不适用于我正在使用的 highcharts 版本。

    感谢 @Pandiyan 解决了 stackBlitz 导入的问题。

    更新:
    当我在本地尝试更改 NoDataToDisplay 导入时,
    import * as noDataToDisplay from 'highcharts/modules/no-data-to-display.src';

    到,
    import NoDataToDisplay from 'highcharts/modules/no-data-to-display';

    我收到以下导入错误。

    enter image description here

    因此,当我尝试遵循@daniel_s 的答案时,出现以下错误。

    enter image description here

    我的所有依赖项都与提供的 stackBlitz 同步。我也
  • 删除了我的 node_modules 文件夹并重新安装了我的所有依赖项。
  • 将 @types/highcharts 更新为最新版本。
  • 最佳答案

    1. What is the proper way of using noData option with angular 5
    2. How to make sure it appears consistently? probably different configuration like setData([]) or setData(null) makes it appears in consistently, but I am not able to find out one root cause behind its inconsistency.
    3. How can I toggle noData message dynamically.


    回复 1. noData模块应该自动工作,因此如果您将一些点添加到您当前可见的系列之一,那么“无数据”消息就会消失。同样,当您 remove()系列点,因此系列将为空,然后图表上将显示“无消息”信息。如果手动使用它,当然你可以像上面提到的那样做。这是一个简单的使用示例(包括按钮): https://stackblitz.com/edit/highcharts-toggling-nodata-w5fwkf

    Re 2. 如果使用 setData([]) 看起来不错和 setData(null) .示例如下: https://stackblitz.com/edit/highcharts-toggling-nodata-54xrqh .如果你的意思不同,你能更准确地描述你的问题吗?

    Re 3. 如果您的意思是更改 noData动态消息,你应该设置 chart.options.lang.noData属性等于某个新字符串,然后调用 chart.hideNoData()chart.showNoData刷新元素值。以下是应用于 ng 的示例: https://stackblitz.com/edit/highcharts-toggling-nodata-hwnzcl

    [编辑]

    引用您的问题更新,为了直接在组件中使用特定模块而不是通过在提供程序中设置它,只需删除 { provide: HIGHCHARTS_MODULES, useFactory: () => [NoDataToDisplay] }来自 app.module.ts文件,并在 app.component.ts 中加载适当的模块使用 require()语法,如下所示:
    import Highcharts from 'highcharts';

    const noData = require('highcharts/modules/no-data-to-display')
    noData(Highcharts)

    实时示例: https://stackblitz.com/edit/highcharts-toggling-nodata-muxx9s

    亲切的问候!

    **

    关于Angular Highcharts - 如何启用 noData 选项并动态更新它,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52668333/

    26 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com