bizchart+slider实现分组柱状图

最新推荐文章于 2025-11-15 04:15:28 发布

原创

最新推荐文章于 2025-11-15 04:15:28 发布 · 773 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #bizchart #slider #分组柱状图 #react

本文介绍如何使用BizCharts库实现带滑块选择的分组柱状图，包括组件封装及具体应用示例。

下面使用bizchart实现分组柱状图，并带有滑块选择。效果图如下：

环境

基于bizchart3.x

npm install bizchart@3.5.9
npm install bizcharts-plugin-slider@3.0.1

Chart-Slider组件封装

Chart和Slider是2个组件，为了方便使用，我们封装在一起，用一个函数返回。

import DataSet from '@antv/data-set';
import {
   
    Axis, Chart, Geom, Legend, Tooltip } from "bizcharts";
import Slider from "bizcharts-plugin-slider";
import React, {
   
    Component } from 'react';

function getGroupChartWithSliderComponent(data) {
   
   

    const ds = new DataSet({
   
   
        state: {
   
   
            start: data[0] ? data[0].timestamp : '',
            end: data[0] ? data[data.length