Reactjs Highcharts/Highstock和React错误,意外标记

Reactjs Highcharts/Highstock和React错误,意外标记,reactjs,highcharts,Reactjs,Highcharts,我正试图让highstocks与react合作,按照指南,我已经提出了以下内容,到目前为止,我导入了前两行,导出在最后一行的下方。在我的渲染函数中,我有我想要的选项,但是我收到了这个错误。我错过了什么吗 从“Highcharts/highstock”导入Highcharts; 从“海图/模块/导出”导入导出; 出口(海图); Highcharts.chart('容器'{ 图表:{ 背景颜色:“#FFFFFF”, 身高:400 }, 标题:{ 文字:“比特币图表” }, 滚动条:{ 已启用:fa

我正试图让highstocks与react合作,按照指南,我已经提出了以下内容,到目前为止,我导入了前两行,导出在最后一行的下方。在我的渲染函数中,我有我想要的选项,但是我收到了这个错误。我错过了什么吗

从“Highcharts/highstock”导入Highcharts;
从“海图/模块/导出”导入导出;
出口(海图);
Highcharts.chart('容器'{
图表:{
背景颜色:“#FFFFFF”,
身高:400
},
标题:{
文字:“比特币图表”
},
滚动条:{
已启用:false
},
范围选择器:{
选定:1
},
系列:[{
名称:“AAPL股价”,
颜色:'黑色',
数据:this.props.data.all_price_值,
类型:'区域',
阈值:空,
工具提示:{
数值小数:2
}
}],
打印选项:{
系列:{
填充颜色:{
linearGradient:[0,0,0,700],
停止:[
[0,#FF9900'],
[1,Highcharts.Color(Highcharts.getOptions().colors[0])。setOpacity(0)。get('rgba')]
]
}
}
},
响应:{
规则:[{
条件:{
最大宽度:500
},
图表选项:{
图表:{
身高:300
},
副标题:{
文本:空
},
导航器:{
已启用:false
}
}
}]
}
});
我正试图通过我的react应用程序实现这一点

此版本有效,如下所述:

import { withHighcharts, HighchartsChart, Chart, /* etc... */ } from 'react-jsx-highcharts';
import Highcharts from 'highcharts';

const MyChart = () => (
  <HighchartsChart>
    <Chart />
    // etc
  </HighchartsChart>
);

export default withHighcharts(MyChart, Highcharts); // Injecting the Highcharts object
从“react jsx highcharts”导入{withHighcharts、HighchartsChart、Chart、/*等...*/};
从“Highcharts”导入Highcharts;
常量MyChart=()=>(
//等
);
使用Highcharts导出默认值(MyChart,Highcharts);//注入Highcharts对象

此版本有效,如下所述:

import { withHighcharts, HighchartsChart, Chart, /* etc... */ } from 'react-jsx-highcharts';
import Highcharts from 'highcharts';

const MyChart = () => (
  <HighchartsChart>
    <Chart />
    // etc
  </HighchartsChart>
);

export default withHighcharts(MyChart, Highcharts); // Injecting the Highcharts object
从“react jsx highcharts”导入{withHighcharts、HighchartsChart、Chart、/*等...*/};
从“Highcharts”导入Highcharts;
常量MyChart=()=>(
//等
);
使用Highcharts导出默认值(MyChart,Highcharts);//注入Highcharts对象

您不能在
中直接编写js代码。至少,您需要用
{}
包装js代码,比如
{JSON.stringify({a:1})}

您可以在
componentDidMount
中呈现图表,这是我的简单演示:
您不能在
中直接编写js代码。至少,您需要用
{}
包装js代码,比如
{JSON.stringify({a:1})}

您可以在
componentDidMount
中呈现图表,这是我的简单演示:

好的,这是可行的,但我没有将滑块放在下面来调整数据,我不想下载数据。我希望视图与JSFIDLE编辑上的视图完全相同:我可以从这里找到它,谢谢!好的,这是可行的,但是我没有把滑块放在下面来调整数据,我也不想下载数据。我希望视图与JSFIDLE编辑上的视图完全相同:我可以从这里找到它,谢谢!