Apexcharts - 正確着色圖形列

Question

我將代碼用於為數組中的圖形着色，但它為 3 列采用一種顏色，即使為每列聲明了 3 個 colors

options: {
  chart: {
    type: 'bar',
    id: 'chart',
   },
   colors: ['#3366ff','#66ff66','#ff0000'],
     dataLabels: {
      enabled: false
     },
    series: [],
     title: {
       text: 'PRAZOS OS',
      },
     bar: {
      columnWidth: '50%',
      endingShape: 'rounded' 
     },

數據

this.$axios.get("/Operacional/GetRelatorio").then(res => { 
this.prazos = res.data
this.$refs.chart1.updateSeries([{
     name: 'PRAZOS OS',
     data: [this.prazos.noPrazo, this.prazos.emDia, this.prazos.atrasadas ],
    }])
})

它看起來如何

在此處輸入圖像描述

我在代碼 3 colors 中聲明了數組，但 3 列只剩下一種顏色

Answer 1

要達到你想要的效果，你需要在你的options的plotOptions中的bar中設置distributed: true 。

像這樣：

plotOptions: {
    bar: {
        distributed: true
    }
}

取自示例中的自定義數據標簽欄。

---

您還可以在文檔中找到distributed的描述。

分布式：Boolean
轉動此選項可使條形離散。 每個值表示每個系列一個條形。

---

例子：

 var options = { chart: { type: 'bar', id: 'chart', }, colors: ['#3366ff', '#66ff66', '#ff0000'], dataLabels: { enabled: false }, series: [{ data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380] }], title: { text: 'PRAZOS OS', }, bar: { columnWidth: '50%', endingShape: 'rounded' }, plotOptions: { bar: { distributed: true } } }; var chart = new ApexCharts(document.querySelector("#chart"), options); chart.render();

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