@xchart/contour v1.0.13

Contour

等高线图组件，支持等高线图 area 和 line 模式

Feature

• 图表等高线图和区域图
• 图表宽高自适应
• 图形颜色范围 colors 支持传入
• 图表导出图片
• 图表导出数据
• 点击交互事件
• 图形 label 标注

TODO

• 交互事件 toolips
• 等高线图形 label 值标注

API

Contour(
    opts: Options,
    data: ChartData,
    container: HTMLElement = document.body,
)

Data

type Data = <{x:number;y:number;value:number}>[]

Option

Data

type Data = <{x:number;y:number;value:number}>[]

Usage

Installation

pnpm add @xchart/contour
# or
yarn add @xchart/contour

import Contour from '@xcahrt/contour';

const data = [
    { x: 0, y: 0, removal: 20 },
    { x: 1, y: 0, removal: 25 },
];

const contour = new Contour(
    {
        zCoord: 'removal',
        colors: ['#ccd5ae', '#e9edc9', '#fefae0', '#faedcd', '#d4a373'],
        width: 500,
        height: 400,
    },
    data,
    document.querySelector('#container'),
);

Action

// 图表导出图片
contour.exportChart();

// 图表导出数据
contour.exportData();