问题标签 [react-highcharts]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
314 浏览

react-native - 如何在移动浏览器上打开的 Highcharts 工具提示中添加链接?

我正在开发一个带有 expo 的 React Native 应用程序。其中一个屏幕包含使用 Highcharts 创建的图形。所有点都有一个带有一些文本的关联工具提示,我想向其中添加一个链接,该链接将在浏览器中打开 URL(即,在应用程序之外)。

基本上,应用程序代码如下所示:

这被渲染为:

在Highcharts工具提示中检查链接我看到了一些有趣的想法,例如在charts键中添加此信息:

哪个有效,但它会打开ChartViewReact Native 中的链接。也就是说,带有图表的空间显示给定的 URL。但是,我希望 URL 在浏览器中打开。

有没有办法在浏览器中打开链接?React NativeLinking.openURL(url);是这样做的方法,但我看不到如何Linking.openURL从设置中进行config设置。

0 投票
1 回答
620 浏览

react-native - 如何让 Android 中的 React Native 知道 Highcharts 图表中工具提示中的点击事件?

我有一个用 Expo 构建的 React Native 应用程序。关于如何在将在移动浏览器上打开的 Highcharts 工具提示中添加链接?我能够将 URL 传递给 Highcharts,以便在单击工具提示时打开该 URL:

这会触发此方法打开 URL:

并且 URL 通过全局变量填充window.myURL并发送消息postMessage()

这在 iOS(物理和仿真器)上运行良好,但在 Android 上不起作用(物理和仿真器都不是)。

我经历了不同的 Github 问题,例如onMessage 未在本机代码中调用,即使从 webview(android)发送并且反应原生 html postMessage 无法到达 WebView,他们倾向于建议在window.postMessage(). 但是,我发现即使这样也行不通:

由于 evenconsole.log()不起作用,在我看来,该click事件似乎没有被 Android 捕获。

如何让 Android 知道此事件,以便我可以浏览消息然后打开 URL?

0 投票
1 回答
908 浏览

reactjs - Highcharts 不呈现:React+Typescript+Highcharts

尝试使用反应调出高图表。我有多个 fetch api 调用(为了说明,我只添加了 2 个),我将使用它们的数据在 UI 中呈现某些内容。

在此示例中,data1 用于呈现表格,data2 用于呈现高图。

我将这些调用的输出存储在一个状态对象中。当我调用这些 API 时,我正在获取数据,但无法将其设置为 highcharts 的“系列”属性以进行渲染,因此没有渲染任何内容。

我正在获取的数据的结构

“api2”:[{“name”:“Test1”,“value”:12},{“name”:“Test2”,“value”:9}]

有人可以帮我弄这个吗?我哪里错了?

我为此使用 highcharts-react-official

代码

0 投票
1 回答
349 浏览

reactjs - react-highcharts中图表的共享图例?

如何使用 react-highcharts 拥有两个带有共享图例(控制两个图表)的图表?

这个jsFiddle中提供了一个使用 jQuery 的解决方案,但我无法在 React 中弄清楚如何做到这一点(并且让组件的选项引用其他组件)。

查询:

});

(作品)

指针赞赏

0 投票
1 回答
224 浏览

javascript - 决定哪个系列进入范围选择器 highstock

我有一个包含 3 个不同系列的图表,并且包含了 Highstock 的范围选择器。我希望能够选择 3 系列中的哪一个是 Range-Selector 中的一组。有没有办法将系列动态分配给范围选择器?

我用这样的 3 个系列创建图表:

我想要完成的是能够选择 A、B 或 C 作为系列活动以在 Range-Selector 预览中查看。

这是一个 jsfiddle:https ://jsfiddle.net/usvonfjh/1/

0 投票
1 回答
1678 浏览

reactjs - TypeError:无法读取 null 的属性“nodeName”

我正在尝试运行一个小图表来测试在 Visual Studio 中创建的项目中的 Highchart 并且遇到了

TypeError: Cannot read property 'nodeName' of null a.Chart.getArgs L:/Google Drive/Open university work/第三年模块/TM4/analitics/ReactApp/ReactApp/ClientApp/node_modules/highcharts/highcharts.js:266 错误消息.

该项目在 React 中并具有以下依赖项

到目前为止,我已经尝试创建一个新的反应项目,并在安装我省略了引导程序和反应路由器的依赖项后将此组件复制到其中。这按预期显示了图表,因此,我现在知道该组件按预期工作。

然后,我尝试重新安装 Highchart 并在原始项目中对 Highchart 做出反应,但没有成功。

我查看了有关堆栈溢出的其他一些帖子,发现了类似的错误,但是,在这些问题中找不到解决方案。

我希望呈现一个图表,而不是我收到一条很长的错误消息,突出显示 highchart.js 文件的部分。

× TypeError: Cannot read property 'nodeName' of null a.Chart.getArgs L:/Google Drive/Open university work/三年级模块/TM4/analitics/ReactApp/ReactApp/ClientApp/node_modules/highcharts/highcharts.js:266

0 投票
1 回答
139 浏览

react-native - 如何在 React 中使用 highcharts 的 chart.get(location)?

我在 React 中使用 highcharts,我想调用 .get() 方法。官方演示是这样的:

我想在 React 中聊天,所以我也使用 highcharts-react lib,我创建了一个这样的 ref:

我得到一个错误: × TypeError: this.chartComponent.get is not a function

我不知道 React 中的 ref 和 ref 是同一个实例var chart = $('.container').highcharts()吗?

谁能告诉我有什么问题?

0 投票
1 回答
285 浏览

highcharts - Highcharts极地结果是线而不是极地

我正在尝试使用带有反应的高图极地。我尝试轻松地创建直线图和饼图。但是,基于 Highcharts API,chart:{type: pie}我需要输入chart:{polar: true}.

之后我直接在 App.js 上进行了编辑npx-create-react myapp,以及我认为不需要说明的以下步骤。

这是我的完整代码:

这将只输出带有柱形、三角形和线条的笛卡尔图,而不是极坐标图。

帮忙谢谢!

0 投票
1 回答
255 浏览

reactjs - 如何使高图点重定向到 React 中具有值的另一个组件?

在 highcharts 中,通过单击数据点,我需要通过在 react 中传递点值来重定向到另一个页面。我正在使用到达/路由器。有什么可以让我们像反应/路由器链接这样的观点。

0 投票
1 回答
412 浏览

reactjs - 将 jalali-moment 库中的自定义日期对象传递给 time.Date 选项

我在我的项目中使用jalali-moment库来处理波斯日期。目前,我不知道如何使用带有 highcharts 的库将所有日期转换为 Jalali 日期。我找到了一个“ time.Date ”选项,它采用自定义日期对象来执行所有与日期相关的操作,例如 highstock 图表中的缩放按钮和 highstock 和折线图中的 xAxis 标签。但我真的不明白如何创建自定义对象并将其传递给它?我在 StackOverflow 中看到了所有相关的问答,但没有人使用更改日期对象的选项,也没有人提到如何使用 jalali-moment 库来做到这一点。highcharts 文档中甚至没有官方示例。请注意,我必须使用 jalali-moment 库,而不能使用任何其他库。

您能否准确解释如何实现这一目标?(最好提一下,我用的是reactjs框架中的highcharts库。)