Как указать цветовую шкалу в объекте данных в Victory Pie

Я использовал VictoryChart реализовать круговую диаграмму, и она отлично работает...

render() {

    const data_distribution = this.state.pie_keys.map((d) => ({x:d, y:this.state.pie_data[d], label:d }));

    return (
      <div className="App">
        <div className="pie_wrapper">
          <VictoryPie
            labelComponent={<VictoryTooltip cornerRadius={0} />}   
            padAngle={0.5}
            innerRadius={100}
            width={400} height={400}
            style={{ 
              labels: { fontSize: 15, fill: "black"},
              data: {
                  fillOpacity: 0.9, stroke: "white", strokeWidth: 3
              }
            }}
            labelRadius={90}
            data = {data_distribution}
          />
        </div>
      </div>
    );
  }

Важно отметить, что data_distribution просто выглядит следующим образом...

data={[
    { x: "Fac of Engineering & Appl Sci", y: 8.557902403495994 },
    { x: "Faculty of Arts and Science", y: 53.775188152464196 },
    { x: "Faculty of Education", y: 13.085700412721534 },
    ...
    ...
  ]}

Поэтому мне интересно, могу ли я установить цвет для каждой части пирога в объекте данных. В документации указано, что...

Цветовые гаммы: "Оттенки серого", "Качественный", "Тепловая карта", "Теплый", "Крутой", "Красный", "Зеленый", "Синий". VictoryPie назначит цвет каждому срезу по индексу, если они не указаны явно в объекте данных.

Это говорит о том, что вы можете, но я не могу понять, как. Я попробовал следующее...

data={[
    { x: "Fac of Engineering & Appl Sci", y: 8.557902403495994, colorScale:"red" },
    { x: "Faculty of Arts and Science", y: 53.775188152464196, colorScale:"red" },
    { x: "Faculty of Education", y: 13.085700412721534, colorScale:"red" },
    ...
    ...
]}

что переводится как...

const data_distribution = this.state.pie_keys.map((d) => ({x:d, y:this.state.pie_data[d], label:d, colorScale:"red"}));

Тем не менее, они не краснеют. Я не могу найти пример в Интернете. Это возможно сделать или нет?

Я знаю что могу определить colorScale: {[...]} но я не об этом. Я хочу иметь возможность установить каждый кусок пирога из объекта данных.

Источник

4 ответа

Решение

Если вы знаете порядок рендеринга данных, то вы можете использовать цвета в том же порядке, он автоматически примет цвет в порядке

<VictoryPie
  colorScale={["black", "red", "green", "#4cc9ff", "navy" ]}
  data={sampleData}
/>
Источник

Я знаю, что на этот вопрос "ответили", но ответ для меня неудовлетворителен. Так как я пришел сюда и разочаровался, я решил опубликовать свое решение в надежде, что другие могут извлечь из него пользу.

Вы можете переопределить цвета для отдельных срезов, используя style проп:

<VictoryPie
  data={[
    { x: "Cats", y: 35 },
    { x: "Dogs", y: 40 },
    { x: "Birds", y: 55 }
  ]}
  style={{
    data: {
      fill: ({ y }) =>
        y > 49 ? 'green'
        : y > 39 ? 'yellow'
        : 'tomato'
    }
  }}
/>

В этом случае вы не должны использовать colorScale совсем. Я прочитал источник, и, насколько я могу судить, это единственный способ сделать цветовое отображение на основе данных в VictoryPie,

Источник

Вы можете получить цвет заливки на основе ваших данных, но вы должны предоставить эту логику. В принятом вами ответе применяется цвет, основанный на значении y, однако вы также можете указать цвет в самих данных, если для этого установлен стиль:

<VictoryPie
  data={[
    { x: "Cats", y: 35, yourAttribute: "#0000FF" },
    { x: "Dogs", y: 40, yourAttribute: "#00FF00" },
    { x: "Birds", y: 55, yourAttribute:"#FF0000" }
  ]}
  style={{
    data: {
      fill: (d) => d.yourAttribute
    }
  }}
/>
Источник

Для текущей версии

"victory": "^35.4.0",
"victory-native": "^35.3.1"

ты можешь сделать:

 <VictoryPie
        data={[
            { x: "Cats", y: 35, fill: "gold" },
            { x: "Dogs", y: 40, fill: "tomato" },
            { x: "Birds", y: 55, fill: "navy" }
        ]}
        style={{
            data: {
                fill: ({datum}) => datum.fill
            }
        }}
   />

См. https://formidable.com/open-source/victory/docs/common-props/#data

Источник

Я вручную добавил функцию для генерации случайной попытки, если это поможет вам `var stats = this.state.statistics;

var stat = this.state.statistic;
        if (stats.length>0) {
            if(this.colors.length<stats.length){
                for(let i=0;i<stats.length;i++){
                    this.colors.push(getRandomColor());
                }
            }
        }
        const color = ['#9167f1', '#f26893', '#99cfef', '#99ef9a'];
        const colors = this.colors;`

function getRandomColor() {
    var letters = '0123456789abcdef';
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}
Источник

Я думаю вместо colorScale: "red", ты хочешь fill: "red" в объекте данных, так как примитивы Slice Victory являются просто SVG <Path> элементы.

Источник
Другие вопросы по тегам