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

Question

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

Answer 1

解决方案 Solution

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

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

代码示例 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