Apexcharts - 正确着色图形列答案

【问题标题】：Apexcharts - correctly color the graphic columnsApexcharts - 正确着色图形列
【发布时间】：2021-01-05 19:01:06
【问题描述】：

我将代码用于为数组中的图形着色，但它为 3 列采用一种颜色，即使为每列声明了 3 种颜色

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 ],
    }])
})

它看起来如何

enter image description here

我在代码中为数组声明了 3 种颜色，但 3 列只剩下一种颜色

【问题讨论】：

标签： javascript vue.js quasar-framework

【解决方案1】：

要达到你想要的效果，你需要在选项中设置distributed: true in bar in plotOptions。

像这样：

plotOptions: {
    bar: {
        distributed: true
    }
}

取自示例中的Custom DataLabels Bar。

您还可以在documentation 中找到distributed 的说明。

分布式：布尔值
打开此选项可使条形图离散。每个值表示每个系列一个条形图。

例子：

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>

【讨论】：