标签: react-highcharts

我该如何使用图表工具提示格式化程序？我正在使用反应包装器来进行高级图表.
我有这样的配置:

const CHART_CONFIG = {
    ...
    tooltip:  
    {
        formatter: (tooltip) => {
            var s = '<b>' + this.x + '</b>';
            _.each(this.points, () => {
                s += '<br/>' + this.series.name + ': ' + this.y + 'm';
            });
            return s;
        },
        shared: true
    },
    ...
}    

但我无法使用此关键字访问图表范围,也无法从工具提示参数中获取信息.谢谢

我在 react-redux 中使用 highcharts-react-official 创建一个钻取图表。

然而，当我点击一个栏进行钻取时，我也会更新一些导致组件重新渲染的道具 - 这似乎阻止了钻取事件。

我在 react-highcharts 中从Change series data 中动态收集，没有重新渲染图表，我应该使用 shouldComponentUpdate 和 getChart() 来防止重新渲染并动态更新数据。

我的问题是 getChart() 似乎不适用于官方的 highcharts react 包。我收到 Uncaught TypeError: this.refs.chart.getChart is not a function

有没有我打算用来获取和动态更新图表的替代方法？或者一些我可以看的例子？

在这里只包括 render 和 shouldComponentUpdate 部分：

shouldComponentUpdate(nextProps, nextState) {
    let chart = this.refs.chart.getChart();
    //dynamically update data using nextProps
    return false;
}

render () {

    const options = {
        chart: {
            type: 'column',
            height: 300,
            events: {
                drillup: (e) => {this.drilledUp(e)}
            }
        },
        plotOptions: …

我使用react-highcharts在我的仪表板页面中创建一个SolidGauge.

并绘制圆边.

所以,我将plotOptions.rounded设置为true.

码:

import ReactHighcharts from 'react-highcharts';
import HighchartsMore from 'highcharts-more';
import SolidGauge from 'highcharts-solid-gauge';

HighchartsMore(ReactHighcharts.Highcharts);
SolidGauge(ReactHighcharts.Highcharts);

...
<ReactHighcharts config={ config }/>

config = {
  ...
  plotOptions: { 
    solidgauge: {
      dataLabels: {
        enabled: false
      },
      linecap: 'round',
      rounded: true,
      stickyTracking: false
    }
  }
}

它在官方jsfiddle中使用相同的配置设置.

但是ReactHighcharts不起作用.

有没有人有建议或可以提供帮助？

感谢您提供任何帮助.

07/14更新

码:

import React, { Component } from 'react';
import ReactHighcharts from 'react-highcharts';
import HighchartsMore from 'highcharts-more';
import SolidGauge from 'highcharts-solid-gauge';

class Demo extends Component {
  constructor …

我正在尝试使用 highcharts 中的加载选项。但我无法找到使用 highcharts-react-official 包来做到这一点的方法。

我在我的 React 应用程序中制作了一个 highcharts 柱状图，现在正在尝试向图表添加一个 onClick 事件。我的目标是当用户点击一列时，我可以获取 X 和 Y 轴的值，然后从页面调用一个函数。

onClick 事件是使用 plotoptions 实现的，如下所示：

plotOptions={{
  series: {
    cursor: 'pointer',
    point: {
      events: {
        click: () => {
          this.fuction.call(this, 1);
        }
      }
    }
  }
}}

问题在于我可以调用该函数，但无法访问该列的值。

所以，我试试这个：

plotOptions={{
  series: {
    cursor: 'pointer',
    point: {
      events: {
        click: function () {
          console.log(this);
        }
      }
    }
  }
}}

这样，我可以访问列上的值，this但不能调用该函数，因为它不保存当前页面对象。

我的问题是，如何将两者结合起来，以便访问所选列的值并调用页面上的函数？

我试过这个：

plotOptions={{
  series: {
    cursor: 'pointer',
    point: {
      events: {
        click: function (e) {
          console.log(this);
          console.log(e);
        }
      }
    }
  } …

我正在尝试higcharts全局更新文本字体，但在文档中找不到如何使用highcharts-react-official. 是否存在Highcharts.theme = style与等价的Highcharts.setOption(Highcharts.theme)？

我正在使用react-highchart。滚动条功能似乎不起作用。下面是一段代码。滚动条在xaxis中处于启用状态，并且似乎没有滚动。

请参考highcharts实现：

http://jsfiddle.net/gh/get/jquery/1.7.2/highcharts/highcharts/tree/master/samples/stock/yaxis/inverted-bar-scrollbar/

var config = {
  title: {
    text: 'Hello, World!'
  },
  chart :{
  type:'bar'
  },
  xAxis: {
    scrollbar:{
    enabled:true
    },
    min:0,
    max:4,
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },
  series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
  }]
};

我正在尝试在我的 Web 应用程序中使用 Highcharts 创建一个条形图，该应用程序在前端使用 React。下面是我的 dashboard.tsx 文件的片段，我基本上只是从 JSFiddle ( http://jsfiddle.net/8qjcz4q0/ )复制并粘贴了代码，该代码使用 Highcharts 呈现简单的条形图，但由于某种原因，它不是工作，我在我的控制台中收到一个错误（Highcharts 错误 #13），渲染 div 没有显示。

 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import * as Highcharts from "highcharts";

 Highcharts.chart('container', {
   chart: {
    type: 'column'
   },
  title: {
    text: 'World\'s largest cities per 2014'
   },
 subtitle: {
    text: 'Source: Wikipedia'
  },
  xAxis: {
    type: 'category',
    labels: {
        rotation: -45,
        style: {
            fontSize: '13px',
            fontFamily: 'Verdana, sans-serif'
        }
      }
   },
   yAxis: {
    min: 0, …

是否有使用 highcharts-react-official 的 PieChart 的工作示例 [ https://www.npmjs.com/package/highcharts-react-official ]

下面的链接提到了 PieChart 标签，但我找不到任何工作示例： Setting Highcharts piechart ChartDefaults from Calling jsx file in React

下面的链接还有一个工作示例，但它不使用 PieChart 标签： https: //codesandbox.io/s/ovx6kqok​​qq

有谁知道 PieChart 标签的示例？

谢谢。

我有一个项目，其中我试图从图表外部实现导出高图表功能。

我有什么办法可以实现这一目标吗？我使用的是 React highcharts，下载格式为 Jpeg 和 CSV。

提前致谢

我正在开发一个快速程序，该程序从酶反应中获取数据并将其绘制成图表。我遇到了这个问题，如果我在 props 中将数据传递给它，我的 highcharts 组件将不会更新。我可以看到控制台中的状态数据正在变化，但我在图表上看不到任何内容。

图表组件：

class HighGraph extends Component {
  state = {
    title: {
      text: "My chart"
    },
    series: [
      {
        data: [1, 2, 3]
      }
    ]
  };

  componentDidMount() {
    let _this = this;

    _this.interval = setInterval(function() {
      console.log(_this.state.series[0].data);
      _this.state.series[0].data = _this.props.list;
    }, 2000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return (
      <div>
        <HighchartsReact highcharts={Highcharts} options={this.state} />
      </div>
    );
  }
}

export default HighGraph;

我传递道具的方式：

    <div>
      <HighGraph list={this.state.graphdata} />
    </div>

正在传递的数组：

[0.003, 0.006, 0, 0, 0.003, 0.006, …

我正在尝试使用react 和react-grid-layout 来实现highChart。图表应该根据react-grid-layout调整大小，为此，我需要在ResponsiveGridLayout的onResizeStop属性中传递chart.reflow() 。我可以在 HighchartsReact 的回调属性中访问图表，但我无法弄清楚如何访问 ResponsiveGridLayout 组件中的图表以将其传递到 onResizeStop 属性中。

import { Responsive, WidthProvider } from 'react-grid-layout';
import Highcharts, { chart } from 'highcharts'
import HighchartsReact from 'highcharts-react-official'
import { useRef, useState } from "react"
import styles from './Blocks.module.css';

const ResponsiveGridLayout = WidthProvider(Responsive);

const options1 = {
    title: {
        text: 'My chart 1'
    },
    series: [{
        type:'bar',
        data: [1,2,3,4,5,6,7,1,2,3,4,5,6,7,1,2,3,4,5,6,7,1,2,3,4,5,6,7]
    }],

  }

const Blocks = (props) => {

    
    const layout1 = [
        { i: "1", x: 0, y: …