问题标签 [react-highcharts]

如标题所述，如何更改图表下方的线条大小？

这就是我目前拥有的 这就是我想要的

每次我在文本区域中输入内容时，下图中的黑线都会不断重新渲染数据。如何让它保持固定？下面是显示图表表格和文本区域代码的代码。我正在使用 CKEditor js 库来显示来自 textarea 的工具。我也在使用 react-highcharts 来显示图表。

谢谢。

为我的 HIGHCHART 配置

正在呈现图表的未决问题代码

维护发布文本区域代码

我正在为一个项目使用 react-highchart。并显示两个图表：1）具有2个系列数据的折线图，它将在同一个图表上呈现两条线。2) 条形图或柱形图。

现在，当我将鼠标悬停在一个点上时，它应该在第一个图表和柱形图中的两条线上启用工具提示。X 轴是日期时间。它应该像这样在两条线上都处于活动状态：

在react-highchart中，我使用shared: true了属性，但它并没有使两条线都处于活动状态。

有没有办法让另一个图表的工具提示也处于活动状态？

编辑

在提出建议后，我正在检查highcharts 中的同步图表，但代码示例在 jQuery 中，我需要在react-highcharts. 我仍然尝试将代码转换为做出反应并这样做：

图表渲染回调后：

处理鼠标移动和同步Extreme：

现在，当我将鼠标悬停在它给出错误的点上时：

但不知何故它适用于第二个图表，如果我将鼠标悬停在第二个图表点上，它会在两个图表上显示工具提示。不适用于第一个图表。加上第一张图表有两个系列。我越来越接近解决方案。

编辑2：解决方案 我发现只有将鼠标悬停在第二个图表上时才会导致工具提示同步。这是由于控制台错误造成的，它破坏了代码（For loop inside handleMouseMove()）。所以在把那个错误放进去之后try catch，它就解决了这个问题。

不是最好的方法，但它有效。现在唯一的问题是，第一个图表有两条系列线（检查上图），只有第一个得到活动圈，而不是第二个。

编辑 3：突出显示多个系列的解决方案。

阅读代码后，我发现了这一行，这仅导致第一个系列突出显示点：

这条线只取第一个系列。错误的代码。它应该是：

现在唯一的问题是这个 try catch，没有得到Can not read property category of undefined.

我正在关注这个 jsFiddle的代码示例，以便在 Highcharts SVG 中绘制一个附加表格，以便在导出图表时将其导出为图像。

我可以绘制我想要的表格，但是当我导出时，我的额外表格不是图像的一部分，它只是显示图表，就好像我没有完成任何额外的绘制一样。

我认为这很重要，因为在示例 jsFiddle 中，我将图例保留在其默认状态（水平，居中），并带有一个负值y，以欺骗 Highcharts 扩展图表下方的 SVG 区域以留出空间为表。但是，作为绘制表格的过程的一部分，我通过更改单个图例元素的tranform: translate()值来移动它们。

但是，当我尝试将图表导出到图像时，在图像中，图例恢复为水平并居中于图表下方，这表明 Highcharts 实际上并未读取“实时”SVG 信息，而是渲染了一些某种缓存版本，还是什么？

我正在使用脱机导出，这种行为是否是其结果？

我也在使用highcharts-react-official，我的导入和设置如下：

这种行为与使用有关highcharts-react-official吗？

正如评论中所建议的，我尝试使用marginBottom图例的负 Y 值代替负 Y 值，以便为 SVG 底部的表格腾出空间，但这并没有改变任何东西，表格仍然没有导出。

这是我的组件的设置方式。我试图包括它在实际将数据放入图表之前接收和处理数据时所经历的所有不同阶段：

https://codesandbox.io/s/w7m53k6p37

我创建了一个输入滑块，让用户可以选择从我们的数据集中选择医院服务。我有一张图表，按年龄组显示患者人数。但是，我希望能够拥有基于服务的图表过滤器。这是我到目前为止所拥有的，但它不起作用。

来自 webpack 的包呈现我的图表之一与我在开发模式下看到的热重载非常不同，并且无论如何都希望保持一致。

它特定于带有at的type图表，我使用了许多其他图表，并且所有图表在和模式之间都具有相同的渲染，正如预期的那样。areapolartruedevprod

这是我得到的dev以及我期望从捆绑中得到的：

这是我浏览 webpack 包后得到的：

这是应用于它的 highcharts 配置：

https://gist.github.com/sylv3r/6533e240107be42526ea77ea6ab5a13d

我使用的 webpack 配置：

https://gist.github.com/sylv3r/001a8c161a9dc580ee5d356a5e9e7155

包版本：

我知道这是一个奇怪而具体的问题，但任何线索都会非常感激，我被困住了。

loading我有一个使用我在 redux 中的状态的 react-highcharts 构建的图表。当loadingis时true，该图表应该将其更改为 0.35 并在isopacity时返回 1 。loadingfalse

我的问题是，当我将loading道具传递给子组件时，它会重新渲染整个组件，并且每当loading更改时，它都会使图表动画两次：

和组件：

使用该loading道具的样式化组件：

我错过了什么吗？我觉得我应该添加更多逻辑shouldComponentUpdate，但我对如何处理这个问题非常迷茫。

如标题所述，如何在高图表的反应中设置具有状态值的数据？this.state.number的值为0 / undefined

代码

我在 componentDidMount 上有一个服务调用。获取数据后，我正在尝试设置包含高图信息的状态。

代码如下。

在这里，我能够获得设置状态的渲染。但是图表上的数据没有更新。我是设置错误还是什么。请建议。如果我调试，我可以在渲染方法上看到更改的数据。但是highchart没有更新

我得到的数据如下

如果我像下面这样使用普通数据，它将起作用

但它不会工作运动视频需要的数据序列

我正在设置我的系列，如下所示。

如果我直接输入数据，则会加载 highchart。

我得到如下数据。

我已经给了我上面的整个班级。

在执行 setState 时，如果我直接将系列数据放入 highchart 将加载。但是，如果我使用从响应中得到的动态数据，那么 highchart 不会将 wrt 加载到数据中。

我正在渲染如下图。

我的问题是如果我使用 setState 动态更改数据图表不呈现。这是什么原因。

但是如果我在渲染中调试所有数据在 setState 之后都可用。但是 highchart 并没有呈现系列变化。