Question

我想为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
        
        };

Answer 1

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

    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

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

1 个答案: