Question

我正在我的Laravel项目中实现highcharts-react包（https://github.com/highcharts/highcharts-react），我需要能够从我的reducer中检索数据并将其插入到字符串中以放入图表配置中的类别

但是，即使数据似乎正确呈现（根据控制台日志记录），图表类别也只是呈现为0到4的数字。

这是我的React代码：

componentDidMount() {
    this.props.refreshServiceProviders(); // this pulls in the data
}

const { providers } = this.props;
const spArray = [];

// build up the array of Service Providers
{ providers.map(function (provider) {
    spArray[provider.id] = provider.name;
}, this)}

// remove empty values
const newArray = spArray.filter(function(x){
    return (x !== (undefined || null || ''));
});

// join the values by comma, encased in quotes
const spList = "['" + newArray.join("','") + "']";

然后在我的X轴下的Highchart配置中，我传递了spList常量：

xAxis: {
    categories: { spList }

当我控制台注销spList时，我得到以下内容：

'Provider 1', 'Provider 2', 'Provider 3', 'Provider 4', 'Provider 5'

当直接在配置中的类别选项中传递时，它可以完美地工作 - 但由于某种原因，当通过常量传递时它不起作用。

我在这里错过了什么吗？我不知道该怎么做。 }，

Answer 1

尝试categories: spList代替categories: { spList }。也就是说，删除表示Object而不是Array的{}。

Answer 2

您将categories对象设置错误。

执行categories: { spList } JavaScript实际执行的操作时，请创建以下对象：

categories: {
    spList: '[...]'
}

此外，您无需在spList中加入字符串，因为newArray已经是数组。

所以基本上你要做的就是设置你的categories categories: newArray。

具有React的Highcharts - 显示为数字而非文本的类别

2 个答案: