Apex 图表范围栏颜色答案

【问题标题】：Apex Charts Range Bar ColorsApex 图表范围栏颜色
【发布时间】：2019-12-17 00:49:44
【问题描述】：

您可以为范围图使用颜色数组吗？我抓住了在条形图中工作的相同数组，但在范围条形图中忽略了颜色。

【问题讨论】：

这实际上取决于您使用的版本。你在使用 OracleJET 的 Anychart 吗？
我认为是最新版本。 .js 文件显示 ApexCharts v3.10.1。
codepen.io/JoeyEff/pen/jOEyPRN?editors=1010
这是 ApexCharts 中的一个错误，它不允许我们为范围条形图中的每一行使用不同的颜色。

标签： javascript charts oracle-apex apexcharts

【解决方案1】：

那里的大多数示例都向您展示了如何设置系列的颜色。使用范围图，默认情况下您最终会得到 1 个系列和多个组。但是，您也可以设置系列中单个项目的颜色。

前往 App Galery 并安装 Sample Charts 应用。转到第 23 页（范围图）页面，深入到范围区域的属性，然后向下滚动，直到看到 JavaScript 初始化代码。在此处添加此功能：

function( options ){
  options.dataFilter = function( data ) {
    data.series[0].items[0].color = "#0B6623";
    data.series[0].items[1].color = "#9DC183";
    data.series[0].items[2].color = "#708238";
    data.series[0].items[3].color = "#C7EA46";
    data.series[0].items[4].color = "#3F704D";

    return data;
  };

  return options;
}

当您运行页面时，您会看到每个项目都有不同的颜色：

【讨论】：