Apex Chart - 反向条形图，因此 0 是最高值

Question

我正在尝试使用顶点图表构建如下所示的 table，我希望数据数组中的最低值成为图表的峰值。

我已经尝试将 reversed:true 配置添加到 yaxis，但这只是翻转了轴，并没有从最高数字开始每个条。

有人知道我是否缺少某些配置或者这是否可行？

Answer 1

这不是最优雅的解决方案，但可以通过更改填充颜色和 backgroundBarColors 属性

var options = {
  series: [
    {
      name: "Servings",
      data: [44, 55, 41, 67, 22, 43, 21, 33, 45, 31, 87, 65, 35]
    }
  ],
  chart: {
    height: 350,
    type: "bar",
    animations: {
      enabled: false
    },
    zoom: {
      enabled: false
    }
  },
  plotOptions: {
    bar: {
      columnWidth: "50%",
      colors: {
        backgroundBarColors: [
          "#333",
          "#333",
          "#333",
          "#333",
          "#333",
          "#333",
          "#333",
          "#333",
          "#333",
          "#333",
          "#333",
          "#333",
          "#333",
          "#333",
          "#333"
        ],
      }
    }
  },
  dataLabels: {
    enabled: false
  },
  stroke: {
    width: 0
  },
  fill: {
    colors: ["#fff"]
  },
  grid: {
    show: false
  },
  xaxis: {
    categories: [
      "Apples",
      "Oranges",
      "Strawberries",
      "Pineapples",
      "Mangoes",
      "Bananas",
      "Blackberries",
      "Pears",
      "Watermelons",
      "Cherries",
      "Pomegranates",
      "Tangerines",
      "Papayas"
    ]
  },
  tooltip: {
    intersect: false,
    shared: true
  },
  yaxis: {
    reversed: true,
  }
};

Apex Chart - 反向条形图，因此 0 是最高值

Apex Chart - Reverse Bar Chart so 0 is the highest value

javascript

apex

apexcharts