使用javascript express路由将JSON加载到C3.js中

使用JavaScript和Express路由将JSON加载到C3.js中的步骤如下：

首先，确保你已经安装了Node.js和Express框架。
创建一个新的Express应用程序，并安装所需的依赖项。在命令行中运行以下命令：

mkdir myapp
cd myapp
npm init -y
npm install express c3

在项目根目录下创建一个名为data.json的JSON文件，并填充它与你想要加载到C3.js图表中的数据。例如：

{
  "data": [
    {"year": 2015, "sales": 100},
    {"year": 2016, "sales": 150},
    {"year": 2017, "sales": 200},
    {"year": 2018, "sales": 250},
    {"year": 2019, "sales": 300}
  ]
}

创建一个名为app.js的文件，并在其中编写以下代码：

const express = require('express');
const app = express();
const c3 = require('c3');
const fs = require('fs');

app.get('/', (req, res) => {
  // 读取data.json文件
  fs.readFile('data.json', 'utf8', (err, data) => {
    if (err) {
      console.error(err);
      return res.status(500).send('Error reading JSON file');
    }

    try {
      const jsonData = JSON.parse(data);
      const chartData = jsonData.data;

      // 创建C3.js图表
      const chart = c3.generate({
        bindto: '#chart',
        data: {
          json: chartData,
          keys: {
            x: 'year',
            value: ['sales']
          }
        }
      });

      // 将C3.js图表的HTML代码发送给客户端
      res.send(`
        <!DOCTYPE html>
        <html>
          <head>
            <title>C3.js Chart</title>
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.css">
          </head>
          <body>
            <div id="chart"></div>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.js"></script>
          </body>
        </html>
      `);
    } catch (error) {
      console.error(error);
      return res.status(500).send('Error parsing JSON data');
    }
  });
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});