如何在React apext图表中为每个柱分配不同的颜色？

问题描述

我想为React apex图表中的不同柱线使用不同的颜色。如何实现呢？

请在条形图的代码段下方找到该条形图，该条形图用于设置reactjs状态内的所有属性。

我正在使用 react-apexchart npm库。

 this.state = {
      series: [{
        data: [422,413,93]
      }],options : {
        chart: {
        height: 200,type: 'bar',},plotOptions: {
        bar: {
          dataLabels: {
            position: 'center',// top,center,bottom
          },}
      },dataLabels: {
        enabled: true,offsetY: -20,style: {
          fontSize: '12px',colors: ["#fff"]
        }
      },xaxis: {
        categories: ['Alerts','Service Requests','Incidents'],position: 'bottom',axisBorder: {
          show: false
        },axisTicks: {
          show: false
        },crosshairs: {
          fill: {
            type: 'gradient',gradient: {
              colorFrom: '#D8E3F0',colorTo: '#bed1E6',stops: [0,100],opacityFrom: 0.4,opacityTo: 0.5,}
          }
        },tooltip: {
          enabled: true,yaxis: {
          show: false
        },grid: { show: false,colors: ['#c00000','#000','#333'],title: {
        text: 'ALL HTI Tickets in GSD (928k Tickets YTD)',floating: true,offsetY: 330,align: 'center',style: {
          color: '#444',fontSize: '14',fontWeight: '600'
        }
      }
    } //option
        
        };

解决方法

您只需要添加一个属性，如下所示： 分布式：是

    this.state = {
          series: [{
            data: [422,413,93]
          }],options : {
            chart: {
            height: 200,type: 'bar',},plotOptions: {
            bar: {
              dataLabels: {
                position: 'center',// top,center,bottom
              },distributed: true
            }
          },dataLabels: {
            enabled: true,offsetY: -20,style: {
              fontSize: '12px',colors: ["#fff"]
            }
          },xaxis: {
            categories: ['One','Two','Three'],position: 'bottom',axisBorder: {
              show: false
            },axisTicks: {
              show: false
            },crosshairs: {
              fill: {
                type: 'gradient',gradient: {
                  colorFrom: '#D8E3F0',colorTo: '#BED1E6',stops: [0,100],opacityFrom: 0.4,opacityTo: 0.5,}
              }
            },tooltip: {
              enabled: true,}
          },yaxis: {
              show: false
            },grid: { show: false,colors: ['#c00000','#000','#333'],title: {
            text: 'heading',floating: true,offsetY: 330,align: 'center',style: {
              color: '#444',fontSize: '14',fontWeight: '600'
            }
          }
        } //option
            
            };

Run It On Codepen