线、柱双轴图中，如何自定义不同系列的颜色？

Question

我有一个双轴图，由折线图和柱状图组成，一个折线图中可能有多条线，一个柱状图中可能有多个柱。
在由折线图和柱状图组成的双轴图中，如何自由的定义每一个柱和折线的颜色等信息？

Answer 1

解决方案 Solution

VChart图表提供了对应的能力，支持通过配置scale来自由控制数据与值的映射关系。在双轴图图，控制颜色就可以使用scale来控制各个图形字段使用特定的颜色值。

更具体的配置规则，可参考：https://visactor.io/vchart/option/barChart#scales.domain

代码示例 Code Example

import { useEffect, useRef } from "react";
import VChart from "@visactor/vchart";

export const Chart = () => {
  const containerRef = useRef(null);

  useEffect(() => {
    const spec = {
      type: "common",
      data: [
        {
          id: "id0",
          values: [
            { x: "Monday", type: "Breakfast", y: 15 },
            { x: "Monday", type: "Lunch", y: 25 },
            { x: "Tuesday", type: "Breakfast", y: 12 },
            { x: "Tuesday", type: "Lunch", y: 30 },
            { x: "Wednesday", type: "Breakfast", y: 15 },
            { x: "Wednesday", type: "Lunch", y: 24 },
            { x: "Thursday", type: "Breakfast", y: 10 },
            { x: "Thursday", type: "Lunch", y: 25 },
            { x: "Friday", type: "Breakfast", y: 13 },
            { x: "Friday", type: "Lunch", y: 20 },
            { x: "Saturday", type: "Breakfast", y: 10 },
            { x: "Saturday", type: "Lunch", y: 22 },
            { x: "Sunday", type: "Breakfast", y: 12 },
            { x: "Sunday", type: "Lunch", y: 19 }
          ]
        },
        {
          id: "id1",
          values: [
            { x: "Monday", type: "Beverage", y: 22 },
            { x: "Tuesday", type: "Beverage", y: 43 },
            { x: "Wednesday", type: "Beverage", y: 33 },
            { x: "Thursday", type: "Beverage", y: 22 },
            { x: "Friday", type: "Beverage", y: 10 },
            { x: "Saturday", type: "Beverage", y: 30 },
            { x: "Sunday", type: "Beverage", y: 50 }
          ]
        }
      ],
      color: {
        type: "ordinal",
        field: "type",
        domain: ["Breakfast", "Lunch", "Beverage"],
        range: ["lightPink", "lightBlue", "purple"]
      },
      series: [
        {
          type: "bar",
          id: "bar",
          dataIndex: 0,
          label: { visible: true },
          seriesField: "type",
          xField: ["x", "type"],
          yField: "y"
        },
        {
          type: "line",
          id: "line",
          dataIndex: 1,
          label: { visible: true },
          seriesField: "type",
          xField: "x",
          yField: "y",
          stack: false
        }
      ],
      axes: [
        { orient: "left", seriesIndex: [0] },
        { orient: "right", seriesId: ["line"], gird: { visible: false } },
        { orient: "bottom", label: { visible: true }, type: "band" }
      ],
      legends: {
        visible: true,
        orient: "bottom"
      }
    };

    const vchart = new VChart(spec, {
      dom: containerRef.current
    });

    vchart.renderSync();

    return () => vchart.release();
  }, []);

  return (
    <div
      ref={containerRef}
      style={{
        width: 520,
        height: 520,
        border: "1px solid #ccc"
      }}
    />
  );
};

结果展示 Results

在线示例：https://codesandbox.io/s/color-scale-nh89qz?file=/src/App.js:...

相关文档

VChart Github

VChart Scale Guide