2

我正在研究 Apexcharts RadialBar 图表。我能够实现此图表，但我正在尝试将未进行部分灰色的颜色更改为蓝色。

代码

import React, { Component } from 'react';
import ReactApexChart from 'react-apexcharts';

export default class GaugeChart extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isLoaded: false,
            error: "",
            value: 90,
            openChart: false,
            options: {
                chart: {
                    offsetY: -10
                },
                plotOptions: {
                    radialBar: {
                        startAngle: -135,
                        endAngle: 135,
                        fill: "#1cbd00",
                        border: '1px solid black',
                        dataLabels: {
                            border: "1px solid #fac5c7",
                            name: {
                                fontSize: '14px',
                                color: "#636363",
                                fontFamily: 'SegoeUI',
                                offsetY: 20,
                            },
                            value: {
                                offsetY: -20,
                                fontSize: '36px',
                                color: "#636363",
                                fontFamily: 'SegoeUI',
                                formatter: function (val) {
                                    let labelValue = ((val / 100) * 90000) | 0;
                                    if(labelValue && labelValue > 9999) {
                                        // Nine Zeroes for Billions
                                        return Math.abs(Number(labelValue)) >= 1.0e+9

                                        ? Math.abs(Number(labelValue)) / 1.0e+9 + "B"
                                        // Six Zeroes for Millions 
                                        : Math.abs(Number(labelValue)) >= 1.0e+6

                                        ? Math.abs(Number(labelValue)) / 1.0e+6 + "M"
                                        // Three Zeroes for Thousands
                                        : Math.abs(Number(labelValue)) >= 1.0e+3

                                        ? Math.abs(Number(labelValue)) / 1.0e+3 + "K"

                                        : Math.abs(Number(labelValue));
                                    } else {
                                        return labelValue;
                                    }
                                }
                            }
                        }
                    }
                },
                fill: {
                    opacity: 1.5,
                    colors: ['#ff9966'],
                    type: 'gradient',
                    gradient: {
                        gradientToColors: ['#ff5e62'],
                        shadeIntensity: 1,
                        opacityFrom: 1,
                        opacityTo: 2,
                        stops: [0, 50, 100],
                        inverseColors: false
                    },
                },
                // stroke: {
                //     lineCap: "round"
                // },
                labels: ['Audience']
            }
        }
    }

    numberConverter = function(labelValue) {

        if(labelValue && labelValue > 9999) {
            // Nine Zeroes for Billions
            return Math.abs(Number(labelValue)) >= 1.0e+9

            ? Math.abs(Number(labelValue)) / 1.0e+9 + "B"
            // Six Zeroes for Millions 
            : Math.abs(Number(labelValue)) >= 1.0e+6

            ? Math.abs(Number(labelValue)) / 1.0e+6 + "M"
            // Three Zeroes for Thousands
            : Math.abs(Number(labelValue)) >= 1.0e+3

            ? Math.abs(Number(labelValue)) / 1.0e+3 + "K"

            : Math.abs(Number(labelValue));
        } else {
            return labelValue;
        }

    }

    render() {
        let series = [];
        let percentage = (10000 / 90000) * 100;
        series.push(percentage);

        return <React.Fragment>
            <div className="row">
                <div className="col-md-12 col-sm-12 col-lg-12 col-xs-12 text-center">
                    <ReactApexChart
                        options={this.state.options}
                        series={series}
                        type="radialBar"
                        height="480"
                    />
                </div>
            </div>
            <div className="row">
                <div className="col-md-6 col-sm-6 col-lg-6 col-xs-6 min-max-div">
                    <span className="min-text">0</span>
                </div>
                <div className="col-md-6 col-sm-6 col-lg-6 col-xs-6 min-max-div">
                    <span className="max-text">{this.numberConverter(10000)}</span>
                </div>
            </div><br /><br />
        </React.Fragment>
    }
}

蓝色以下的东西需要变成蓝色。现在它显示为灰色。 在此处输入图像描述

4

1 回答 1

5

在 ApexCharts 径向条中，未进行的区域称为轨迹。

尝试这个

plotOptions: {
    radialBar: {
        track: {
          background: '#1cbd00'
        }
    }
}
于 2019-12-19T16:01:25.357 回答