Когда я передаю значение цвета Dynami c из JSON в BarSeries, гистограмма devextreme не распознает их и делает все полосы черными - PullRequest
Новая
       141

Когда я передаю значение цвета Dynami c из JSON в BarSeries, гистограмма devextreme не распознает их и делает все полосы черными

0 голосов
/ 30 мая 2020

Я создал визуализатор данных, используя ReactJS, @devexpress и @material-ui. В настоящее время диаграмма выглядит следующим образом:

enter image description here

Однако я хочу, чтобы полосы отображались с динамическими c цветами, которые присутствуют в следующих 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>    
    );
  }
}

Но все цвета полос черные!

Однако, если я поставлю укажите цветовой код c, все полосы отображаются с этим цветом, т.е. 

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

Есть ли способ динамически передавать цвет каждой полосы? Я использую https://devexpress.github.io/devextreme-reactive/react/chart/docs/reference/bar-series/ в качестве ориентира.

...