1

カーボン デザイン チャートの反応ライブラリを使用してgetFillColorいますが、チャート オプション プロパティの関数を使用してカスタム カラーを設定するのが困難です。

import React from "react";
import ReactDOM from "react-dom";
import { DonutChart } from "@carbon/charts-react";
import "@carbon/charts/styles.css";

const colors = {
  java: "#FF0000",
  javascript: "#00FF00",
  "c++": "#0000FF"
};

const chartData = [
  {
    group: "java",
    value: 300
  },
  {
    group: "javascript",
    value: 600
  },
  {
    group: "c++",
    value: 200
  }
];

const demoDonutOptions = {
  getFillColor: (field) => {
    return colors[field];
  },
  height: "300px"
};

function App() {
  return (
    <div className="App">
      <h3>React Donut chart with label</h3>
      <div>
        <DonutChart data={chartData} options={demoDonutOptions} />
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

上記のコードは v0.40.2 以下で動作します。このサンドボックスをチェックアウトすると、色が正しく設定されます。

ここに画像の説明を入力

ただし、v0.40.3 以降では機能しなくなりました。このサンドボックスを参照してください。色は変更されていません。

ここに画像の説明を入力

カーボンデザインチャートフレームワークで色を設定する正しい方法は何ですか?

4

1 に答える 1

2

history からcolor.scale、チャート オプションでプロパティを指定する必要がある変更があったことがわかりました。

const demoDonutOptions = {
  color: {
    scale: {
      java: "#FF0000",
      javascript: "#00FF00",
      "c++": "#0000FF"
    }
  },
  height: "300px"
};

color.scaleこの例を機能させるには、すべてのグループを指定する必要があることに注意してください。

import React from "react";
import ReactDOM from "react-dom";
import { DonutChart } from "@carbon/charts-react";
import "@carbon/charts/styles.css";

const colors = {
  java: "#FF0000",
  javascript: "#00FF00",
  "c++": "#0000FF"
};

const chartData = [
  {
    group: "java",
    value: 300
  },
  {
    group: "javascript",
    value: 600
  },
  {
    group: "c++",
    value: 200
  }
];

const demoDonutOptions = {
  color: {
    scale: colors
  },
  height: "300px"
};

function App() {
  return (
    <div className="App">
      <h3>React Donut chart with label</h3>
      <div>
        <DonutChart data={chartData} options={demoDonutOptions} />
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

このサンドボックスをチェックアウト

getFillColorswhich をオーバーライドして使用することも可能ですが、現時点では必須color.scaleのようですcolor.scale

于 2020-11-08T08:22:19.083 に答える