柱状图动态着色报错：chart.on is not a function 问题解决

错误原因分析 #

Uncaught TypeError: chart.on is not a function 通常由两个原因导致：

• Chartist.js库未正确加载，创建的chart对象不是有效的Chartist实例
• 使用了不兼容的旧版本，v1.x及以上版本才支持实例的on事件绑定方法

完整解决方案 #

1. 确保正确引入Chartist.js #

先在页面中引入最新稳定版的Chartist库（CSS用于基础样式，JS实现图表逻辑）：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chartist@1.0.0/dist/chartist.min.css">
<script src="https://cdn.jsdelivr.net/npm/chartist@1.0.0/dist/chartist.min.js"></script>

2. 实现数值分级变色的完整代码 #

以下是可直接运行的代码，包含正确的事件绑定和颜色逻辑：

// 示例数据
var data = {
  labels: ['项目1', '项目2', '项目3', '项目4', '项目5'],
  series: [
    [-4.2, -0.8, 0.5, 2.7, 5.1]
  ]
};

// 图表基础配置
var options = {
  axisY: {
    range: [-5, 5] // 固定Y轴范围，匹配需求的数值区间
  }
};

// 创建柱状图实例
var chart = new Chartist.Bar('.ct-chart', data, options);

// 绑定绘制事件，动态修改柱子颜色
chart.on('draw', function(drawInfo) {
  // 仅处理柱子元素
  if (drawInfo.type === 'bar') {
    var value = drawInfo.value.y; // Y轴方向的数值
    var barColor;
    
    // 根据数值区间分配颜色
    if (value <= -3) {
      barColor = '#e74c3c'; // 红色（接近-5）
    } else if (value >= 3) {
      barColor = '#2ecc71'; // 绿色（接近5+）
    } else {
      barColor = '#f1c40f'; // 黄色（接近0）
    }
    
    // 将颜色应用到柱子上
    drawInfo.element.attr({
      style: 'stroke: ' + barColor + '; stroke-width: 22px;'
    });
  }
});

3. 关键说明 #

• 通过chart.on('draw', ...)监听图表绘制事件，每个元素渲染时都会触发回调
• 用drawInfo.type筛选出柱子元素，避免修改其他图表组件（如坐标轴、标签）
• 根据柱子的drawInfo.value.y数值判断区间，设置对应颜色
• 利用drawInfo.element.attr()修改柱子的样式属性，Chartist的柱状图默认通过stroke绘制，所以修改stroke颜色即可

常见排查点 #

• 打开浏览器控制台，输入Chartist，如果返回对象说明库加载正常；若返回undefined，检查CDN链接是否正确
• 确保HTML中存在对应容器：<div class="ct-chart" style="height: 300px;"></div>（需设置高度保证图表正常显示）

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