ApexCharts报错t.substring is not a function问题求助

我之前也碰到过类似的错误，大概率是你的颜色配置格式错误触发的，结合你的情况具体分析：

问题根源 #

1. 颜色配置的两个错误：

   • 在plotOptions.bar.colors.ranges里，color字段要求是单个合法颜色字符串，但你写成了数组['#0000']，ApexCharts在解析这个颜色时，会尝试对数组调用substring方法，自然就会抛出t.substring is not a function的错误。
   • 另外#0000不是合法的十六进制颜色值，标准的十六进制颜色是3位（如#000）或6位（如#000000），如果要设置透明色，建议用rgba(0,0,0,0)或者transparent。

2. 全0系列的触发条件：
   当你的系列数据全为0时（比如Error和No Sign系列），会命中from:0, to:0的颜色范围规则，进而触发上述颜色配置的错误；而把0换成1时，不会命中这个规则，所以报错暂时消失，但这只是规避了问题，不是根本解决。

修复方案 #

1. 修正plotOptions的颜色配置 #

把错误的颜色数组改成合法的单个颜色值，同时修正颜色格式：

plotOptions: {
  bar: {
    columnWidth: '60%',
    colors: {
      ranges: [{
        from: 0,
        to: 0,
        color: 'transparent' // 或者你需要的合法颜色，比如'#000000'
      }],
      backgroundBarColors: [],
      backgroundBarOpacity: 1,
      backgroundBarRadius: 0,
    },
  }
},

2. 完整的修正后配置 #

将修正后的plotOptions加入你的原配置，完整代码如下：

// Option Chart
var heightChart = 400; // 假设你的heightChart有定义，这里补充示例值
var options = { 
  series: [ 
    { name: 'Operating', data: [1785, 1661, 1663, 1653, 1882, 1725, 6153, 1153, 6153, 6153, 6153, 1653, 1153, 1663, 1661] }, 
    { name: 'Stopping', data: [4072, 0, 0, 0, 248, 2534, 8533, 0, 0, 0, 0, 0, 0, 0, 0] }, 
    { name: 'Error', data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] },
    { name: 'No Sign', data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] } 
  ], 
  chart: { type: 'bar', height: heightChart, stacked: true, stackType: '100%' }, 
  responsive: [{ breakpoint: 480, options: { legend: { position: 'bottom', offsetX: -10, offsetY: 0 } } }], 
  xaxis: { labels: { style: { colors: [], fontSize: '15px', fontFamily: 'Helvetica, Arial, sans-serif', fontWeight: 400, cssClass: 'apexcharts-xaxis-label', } }, }, 
  yaxis: { labels: { style: { colors: [], fontSize: '15px', fontFamily: 'Helvetica, Arial, sans-serif', fontWeight: 400, cssClass: 'apexcharts-xaxis-label', } }, },
  // 修正后的plotOptions
  plotOptions: {
    bar: {
      columnWidth: '60%',
      colors: {
        ranges: [{
          from: 0,
          to: 0,
          color: 'transparent'
        }],
        backgroundBarColors: [],
        backgroundBarOpacity: 1,
        backgroundBarRadius: 0,
      },
    }
  }
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

验证效果 #

修正后，不管数据里有没有0，图表都能正常渲染，不会再抛出t.substring is not a function的错误。

内容的提问来源于stack exchange，提问作者Clover Black