CanvasJS图表在jsFiddle正常运行，Node.js环境下无法工作求助

我完全理解你的困扰——在jsFiddle里能正常跑的CanvasJS图表，放到自己的Node.js+EJS项目里就失效了，这种环境差异导致的问题确实让人摸不着头脑。结合你的代码，我整理了几个核心问题点和对应的解决办法：

1. 重复且协议不一致的脚本引入 #

你的seare.ejs里重复引入了两次CanvasJS脚本，还混用了HTTP和HTTPS协议：

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

这会触发两个问题：

• 如果你的Node.js服务是HTTPS部署的，浏览器会阻止HTTP协议的资源加载（混合内容安全限制）；
• 重复加载脚本可能引发变量冲突，导致CanvasJS对象初始化异常。

解决办法：移除重复引入，统一使用HTTPS协议的脚本链接：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

2. 缺少请求错误处理，无法定位数据加载问题 #

你的AJAX请求没有错误处理逻辑，如果JSON请求失败或者数据结构异常，你根本看不到报错信息，自然没法排查问题。

解决办法：给$.getJSON添加done和fail回调，同时增加数据合法性校验：

$(document).ready(function() {
  $.getJSON("https://api.myjson.com/bins/45rin")
    .done(function(result) {
      console.log("JSON数据加载成功:", result);
      // 先校验数据结构是否符合预期
      if (result.dataPoints && Array.isArray(result.dataPoints)) {
        var dataPoints = [];
        for (var i = 0; i < result.dataPoints.length; i++) {
          dataPoints.push({
            label: result.dataPoints[i].label,
            y: parseInt(result.dataPoints[i].y)
          });
        }
        
        var chart = new CanvasJS.Chart("chartContainer", {
          data: [{
            type: "column",
            dataPoints: dataPoints
          }]
        });
        chart.render();
      } else {
        console.error("错误：返回的JSON数据中没有有效的dataPoints数组");
      }
    })
    .fail(function(jqXHR, textStatus, errorThrown) {
      console.error("JSON请求失败:", textStatus, errorThrown);
    });
});

3. 跨域请求限制（潜在问题） #

虽然api.myjson.com通常支持跨域请求，但如果你的Node.js服务运行在本地或其他域名下，部分浏览器可能会触发CORS限制。如果控制台出现CORS相关错误，可以在Node.js后端设置代理规避：

步骤1：安装代理中间件

npm install http-proxy-middleware --save

步骤2：在index.js中配置代理

const { createProxyMiddleware } = require('http-proxy-middleware');

// 将本地/api/myjson开头的请求转发到api.myjson.com
router.use('/api/myjson', createProxyMiddleware({
  target: 'https://api.myjson.com',
  changeOrigin: true,
  pathRewrite: { '^/api/myjson': '' }
}));

步骤3：修改EJS中的AJAX请求地址

$.getJSON("/api/myjson/bins/45rin", function(result) {
  // 原处理逻辑
});

4. 必备排查步骤：查看浏览器控制台错误 #

无论哪种情况，第一步都应该打开浏览器开发者工具（F12），切换到Console标签，查看是否有以下类型的错误：

• CanvasJS is not defined：说明CanvasJS脚本加载失败；
• $ is not defined：说明jQuery脚本加载失败；
• CORS相关错误：说明跨域请求被阻止；
• result.dataPoints is undefined：说明返回的JSON数据结构不符合预期。

按照上面的步骤调整后，你的图表应该能在Node.js环境正常渲染了。

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