我怎樣才能在頂點欄聊天中更改 colors

Question

我正在使用 apex-chart 在react和mui中構建條形圖，我想更改條形圖 colors，有什么解決方案嗎？？？ 我已經嘗試了很多東西，但我認為沒有辦法實現這件事。 目前我有這種顏色組合

但我想實現這個

這是我的代碼，

        chart: {
            parentHeightOffset: 0,
            toolbar: { show: false },
        },
        plotOptions: {
            bar: {
                borderRadius: 4,
                distributed: true,
                columnWidth: '20%',
                endingShape: 'rounded',
                startingShape: 'rounded',
            },
        },
        stroke: {
            width: 2,
            colors: [theme.palette.background.paper],
        },
        // legend: { show: false },
        grid: {
            strokeDashArray: 7,
            padding: {
                top: -1,
                right: 0,
                left: -12,
                bottom: 5,
            },
        },
        dataLabels: { enabled: false },

        states: {
            hover: {
                filter: { type: 'none' },
            },
            active: {
                filter: { type: 'none' },
            },
        },
        xaxis: {
            categories: [
                'Jan',
                'Feb',
                'Mar',
                'Apr',
                'May',
                'Jun',
                'Jul',
                'Aug',
                'Sep',
                'Nov',
                'Dec',
            ],
            tickPlacement: 'on',
            labels: { show: true },
            axisTicks: { show: false },
            axisBorder: { show: false },
        },
        yaxis: {
            show: true,
            tickAmount: 4,
            labels: {
                offsetX: -17,
                formatter: (value) =>
                    `${value > 999 ? `${(value / 1000).toFixed(0)}` : value}k`,
            },
        },
    };



<ReactApexcharts
                    type='bar'
                    height={205}
                    options={options}
                    series={[
                        {
                            name: 'Income',
                            data: [37, 57, 45, 75, 57, 40, 65],
                            color:theme.palette.primary.main
                        },
                        {
                            name: 'Expenses',
                            data: [32, 82, 23, 69, 90, 14, 60],
                            color: theme.palette.success.main,
                        },
                    ]}
                />

我正在通過 colors 但它沒有用，對於收入欄我想要橙色但是對於費用 colors 我想要綠色

Answer 1

您應該刪除plotOptions.bar.distributed （默認情況下為false ）並使用這個colors 數組為您的系列着色。

看看這個簡單的例子，它本質上是你沒有 React 的代碼：

 let options = { series: [{ name: 'Income', data: [37, 57, 45, 75, 57, 40, 65] }, { name: 'Expenses', data: [32, 82, 23, 69, 90, 14, 60] }], chart: { type: 'bar', height: 205, parentHeightOffset: 0, toolbar: { show: false } }, colors: ['#ff7c1b', '#38cb89'], // <--- HERE plotOptions: { bar: { borderRadius: 4, columnWidth: '20%', endingShape: 'rounded', startingShape: 'rounded' } }, grid: { strokeDashArray: 7, padding: { top: -1, right: 0, left: -12, bottom: 5 } }, dataLabels: { enabled: false }, states: { hover: { filter: { type: 'none' } }, active: { filter: { type: 'none' } } }, xaxis: { categories: [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Nov', 'Dec' ], tickPlacement: 'on', labels: { show: true }, axisTicks: { show: false }, axisBorder: { show: false } }, yaxis: { show: true, tickAmount: 4, labels: { offsetX: -17, formatter: (value) => `${value > 999? `${(value / 1000).toFixed(0)}`: value}k` } } }; let chart = new ApexCharts(document.querySelector('#chart'), options); chart.render();

 <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script> <div id="chart"></div>