Question

我已经通过express-generator的ExpressJS生成了一个Web应用支架，但是很难集成来自客户端库Highcharts的图表。

我尝试了什么？在应用程序的HTML页面index.html中，我添加了引用图表的div：

<div id="theChart" style="width:100%; height:400px;"></div>

然后在index.js中添加JavaScript方面的内容：

var Highcharts = require('highcharts');
// Load module after Highcharts is loaded
//require('highcharts/modules/exporting')(Highcharts);

Highcharts.chart('theChart', {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Fruit Consumption'
    },
    xAxis: {
        categories: ['Apples', 'Bananas', 'Oranges']
    },
    yAxis: {
        title: {
            text: 'Fruit eaten'
        }
    },
    series: [{
        name: 'Jane',
        data: [1, 0, 4]
    }, {
        name: 'John',
        data: [5, 7, 3]
    }]
})

（当然index.js还包含ExpressJS的标准路由内容，例如router.get('/'...。）

现在，当我构建应用程序时，我会收到错误消息

Highcharts.chart('theChart', {
           ^

TypeError: Highcharts.chart is not a function

这意味着Highcharts不是对象（正如我所期望的那样），而是它的一个功能。这反过来似乎表明该代码可能仅在服务器端运行，而未与index.html关联以在客户端上运行。

在ExpressJS应用程序中，放置Load-Highcharts-and-generate-chart代码的正确位置在哪里，以便ExpressJS将其捆绑到index.html的客户端？

将客户端JavaScript代码放在ExpressJS应用中的哪里？

0 个答案: