时间戳

首页 > 解决方案 > 当我将动态颜色值从 JSON 传递到 BarSeries 时，devextreme 条形图无法识别它们并使所有条形变黑

reactjs - 当我将动态颜色值从 JSON 传递到 BarSeries 时，devextreme 条形图无法识别它们并使所有条形变黑

问题描述

我已经使用 ReactJS 和@devexpressand构建了一个数据可视化器@material-ui。该图表目前如下所示：

在此处输入图像描述

但是，我希望条形图以动态颜色呈现，这些颜色存在于以下 JSON ( bar_color)

[
    {
      "id": 8,
      "place": "Valley Of Flowers",
      "search": 2048,
      "bar_color": "#82b507"
    },
    {
      "id": 4,
      "place": "Bali Pass",
      "percent": 11,
      "bar_color": "#025596"
    },
    ...
]

这是完整的组件：

import React, { Component } from "react";
import Paper from "@material-ui/core/Paper";

import { BarSeries, Animation, EventTracker } from "@devexpress/dx-react-chart";

export default class PlaceSearchData extends Component {
  state = {
    error: null,
    isLoaded: false,
    items: []
  };

  render() {
    return (
       <Paper>
          <Chart data={items}>
            <ArgumentAxis />
            <ValueAxis max={10} />

            <BarSeries
              valueField="search"
              argumentField="place"
              color="bar_color" // I want this to be dynamically assigned from the JSON data
            />
            <Title text="Place wise search (top 6)" />
            <Animation />
            <EventTracker />
            <Tooltip />
          </Chart>
       </Paper>    
    );
  }
}

但是所有的酒吧颜色都是黑色的！

但是，如果我输入一个特定的颜色代码，所有的条都用那种颜色渲染，即

<BarSeries
   valueField="search"
   argumentField="place"
   color="#82b507"
/>

有什么方法可以动态传递每个条的颜色吗？我使用https://devexpress.github.io/devextreme-reactive/react/chart/docs/reference/bar-series/作为参考点。

标签： reactjsmaterial-uidevextreme

解决方案

在寻找解决方案的同时，我找到了解决方案：必须<Palette scheme={shema} />在 <Chartdata={data}> 注意之后使用，例如不要放在后面： <PieSeries valueField="area" argumentField="country" /> 否则它将不起作用:)并且它只能识别十进制颜色 <Palette scheme={['#d72e3d', '#249e3d', '#ffb90c', '#1698af', '#616a72']} />

推荐阅读