Вертикальная гистограмма с накоплением в reactjs - PullRequest
Новая
       308

Вертикальная гистограмма с накоплением в reactjs

0 голосов
/ 07 августа 2020

Я работаю над графиком в своем проекте reactjs. Для диаграмм я использую апекс-диаграммы. У меня проблема с гистограммой с накоплением. Я хочу создать гистограмму с накоплением, но не могу этого сделать, поскольку я новичок. Я пробовал кодировать, делаю прикрепленную гистограмму. enter image description here

  • Code is given below:
import React from "react";
import '../../../assets/css/cp-style.css';
import Chart from 'react-apexcharts'
import SourceSystemRating from '../../../assets/img/customer-profiling/Source system rating.svg';
import ArrowDown from '../../../assets/img/customer-profiling/Down Arro.svg';
import CreditCard from '../../../assets/img/customer-profiling/credit-card.svg'
import internetBanking from '../../../assets/img/customer-profiling/Internet Banking.svg'
import Credit from '../../../assets/img/customer-profiling/credit-card11.svg';
import debitCard from '../../../assets/img/customer-profiling/debit-card 1.svg';
import Barchartdoubleas from '../../Apex-Charts/bar-charts-components/BasicBarChart'
import StackedColumnsChart from '../../Apex-Charts/column-charts-components/StackedColumnsChart';

class TransactionPoints extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            options: {
               
                chart: {
                    stacked: true,
                    toolbar: {
                        show: false
                    },
                    zoom: {
                        enabled: true
                    }
                },
                responsive: [{
                    breakpoint: 480,
                    options: {
                        legend: {
                            position: 'right',
                            offsetY: 0,
                          height: 230,
                        }
                    }
                }],
                plotOptions: {
                    bar: {
                        horizontal: false,
                    },
                },
                xaxis: {

                    categories: ['', 'Earn', '', '', '', '', '',
                        'Burn', ''
                    ],
                },
                legend: {
                    position: 'right',
                    offsetY: 9000
                },
                fill: {
                    opacity: 1
                },
                colors: [ '#fcaf33','#a85531','#4490d7' ,'#a8a331',],

            },
            series: [{
                name: 'Credit Card',
                data: [0, 0, 0, 0, 0, 0, 0, 450, 0]
            }, {
                name: 'PC',
                data: [0, 350, 0, 0, 0, 0, 0, 0, 0]
            }, {
                name: 'Naheed',
                data: [0, 200, 0, 0, 0, 0, 0, 0, 0]
            }, {
                name: 'Zamana',
                data: [0, 100, 0, 0, 0, 0, 0, 0, 0]
            }],
        }
    }

    render() {
        return (
            
                
                     Очки транзакций      ); }} экспорт по умолчанию TransactionPoints;

Я хотел создать эти изображения - данные выше. введите описание изображения здесь

...