Highcharts 没有HTML页面的木偶演员？_Highcharts_Puppeteer

Highcharts 没有HTML页面的木偶演员？

highcharts

Highcharts 没有HTML页面的木偶演员？,highcharts,puppeteer,Highcharts,Puppeteer,我已经成功地使我的木偶剧本与海图一起工作，但是只有当我转到包含highcharts库脚本的页面时包括。我正试图找出如何消除html页面对木偶演员剧本的要求。下面的highcharts3.html可以工作现在，我想对上面的内容进行调整，以引入highcharts.js文件，而不是通过一个脚本包含在html页面中，但不知何故在木偶演员中脚本本身。以下是我的尝试：海图测试4 const puppeter=require（'puppeter'）常量fs=require（'fs'） co

我已经成功地使我的木偶剧本与海图一起工作，但是只有当我转到包含highcharts库脚本的页面时包括。我正试图找出如何消除html页面对木偶演员剧本的要求。下面的highcharts3.html可以工作

现在，我想对上面的内容进行调整，以引入highcharts.js文件，而不是通过一个脚本包含在html页面中，但不知何故在木偶演员中脚本本身。以下是我的尝试：


海图测试4
const puppeter=require（'puppeter'）
常量fs=require（'fs'）
const Highcharts=require（'Highcharts'）
log（'main fs W_OK='+fs.W_OK）
console.log（'main Highcharts.version='1〕+
Highcharts（）.version）//有效
异步函数run（）{
log（'runfs W_OK='+fs.W_OK）
console.log（'run Highcharts.version='+Highcharts（）.version）//Works
//const browser=wait puppeter.launch({
//无头：是的
// })
const browser=wait puppeter.launch({
无头：错，
slowMo:2000，
devtools：对
})
const page=wait browser.newPage（）
page.on（“console”，msg=>console.log（`page console:${msg.text（）}`））；
等待页面。转到（'http://localhost:7890/highcharts4.html', {
waitUntil：“domcontentloaded”
})
异步函数loadChart（）{
log（'loadChart fs W_OK='+fs.W_OK）
console.log（'loadChart Highcharts.version='+
Highcharts（）.version）//有效
等待页面。评估（异步（高图，fs）=>{
//定义fs是因为我们将其传递给page.evaluate
log（'page.evaluate fs W_OK='+fs.W_OK）
//以下语句在以下情况下失败：
//（节点：3580）未处理的PromisejectionWarning：
//错误：评估失败：
//TypeError:Highcharts不是一个函数
console.log（'page.evaluate Highcharts.version='1〕+
Highcharts（）.version）
//如果取消注释以代替上述内容，则会失败：
//海图未定义
//console.log（'page.evaluate Highcharts.version='1〕
//+高图表。版本）
var myChart=Highcharts.chart（'容器'{
图表：{
类型：'bar'
},
标题：{
正文：“水果消费”
},
xAxis：{
类别：[‘苹果’、‘香蕉’、‘橙子’]
},
亚克斯：{
标题：{
文字：“吃水果”
}
},
系列：[{
姓名：'简'，
数据：[1,0,4]
}, {
姓名：'约翰'，
数据：[5,7,3]
}]
});
}，海图，fs）
}
等待负荷图（）
等待浏览器关闭（）
}
运行（）

这在loadChart函数中失败。我不知道该怎么做需要高图表，以便在页面范围内看到它

我终于弄明白了，发帖子以防万一会帮助别人。钥匙正在使用fs.readFileSync在上下文中读取my highcharts.js 这是本页的最后一页

现在，这里是消除.html页面的最终版本

/**
*此文件创建一个highchart，
*不需要html页面。html是精心编制的
*在这个脚本中。
*/
const puppeter=require（'puppeter'）
常量fs=require（'fs'）
异步函数run（）{
const browser=wait puppeter.launch({
无头：是的
})
//const browser=wait puppeter.launch({
//无头：错，
//slowMo:2000，
//devtools：对
// })
const page=wait browser.newPage（）
page.on（“console”，msg=>console.log（`page console:${msg.text（）}`））；
const load=page.waitForNavigation({
等待至：“加载”
})
常量html=
`
海图测试4
`
等待页面。设置内容（html）
等待装载
异步函数loadChart（）{
evaluate（fs.readFileSync（'./lib/highcharts/highcharts.js'，'utf8'）；
等待页面。评估（异步（fs）=>{
console.log（'page.evaluate Highcharts.version='1〕
+Highcharts.version）
var myChart=Highcharts.chart（'容器'{
图表：{
类型：'bar'
},
标题：{
正文：“水果消费”
},
xAxis：{
类别：[‘苹果’、‘香蕉’、‘橙子’]
},
亚克斯：{
标题：{
文字：“吃水果”
}
},
系列：[{
姓名：'简'，
数据：[1,0,4]
}, {
姓名：'约翰'，
数据：[5,7,3]
}]
});
}，财政司司长）
}
等待负荷图（）
等待浏览器关闭（）
}
运行（）

我终于弄明白了，发帖子以防万一会帮助别人。钥匙正在使用fs.readFileSync在上下文中读取my highcharts.js 这是本页的最后一页

现在，这里是消除.html页面的最终版本

/**
*此文件创建一个highchart，
*不需要html页面。html是精心编制的
*在这个脚本中。
*/
const puppeter=require（'puppeter'）
常量fs=require（'fs'）
异步函数run（）{
const browser=wait puppeter.launch({
无头：是的
})
//const browser=wait puppeter.launch({
//无头：错，
//slowMo:2000，
//devtools：对
// })
const page=wait browser.newPage（）
page.on（“console”，msg=>console.log（`page console:${msg.text（）}`））；
常数
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Highcharts Test 3</title>
</head>
<body>
<script src="/lib/highcharts/highcharts.js"></script>
<div id="container" style="width:100%; height:400px;"></div>
</body>
</html>

const puppeteer = require('puppeteer')
const fs = require('fs')

console.log('main fs W_OK=' + fs.W_OK)

async function run() {

    console.log('run fs W_OK=' + fs.W_OK)

    // const browser = await puppeteer.launch({
    //     headless: true
    // })
    const browser = await puppeteer.launch({
        headless: false,
        slowMo: 2000,
        devtools: true    })

    const page = await browser.newPage()
    page.on("console", msg => console.log(`Page Console: ${msg.text()}`));

    await page.goto('http://localhost:7890/highcharts3.html', {
        waitUntil: "domcontentloaded"
    })

    async function loadChart() {

        console.log('loadChart fs W_OK=' + fs.W_OK)

        await page.evaluate(async (fs) => {

            console.log('page.evaluate fs W_OK=' + fs.W_OK)
            console.log('Highcharts.version='
                + Highcharts.version)

            var myChart = Highcharts.chart('container', {
                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]
                }]
            });
        }, fs)
    }

    await loadChart()
    await browser.close()
}

run()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Highcharts Test 4</title>
</head>
<body>
<!-- Let's try to do this in the script -->
<!--<script src="/lib/highcharts/highcharts.js"></script>-->
<div id="container" style="width:100%; height:400px;"></div>
</body>
</html>

const puppeteer = require('puppeteer')
const fs = require('fs')
const Highcharts = require('highcharts')

console.log('main fs W_OK=' + fs.W_OK)
console.log('main Highcharts.version=' +
    Highcharts().version)      //Works

async function run() {

    console.log('run fs W_OK=' + fs.W_OK)
    console.log('run Highcharts.version=' + Highcharts().version)   //Works

    // const browser = await puppeteer.launch({
    //     headless: true
    // })
    const browser = await puppeteer.launch({
        headless: false,
        slowMo: 2000,
        devtools: true
    })

    const page = await browser.newPage()
    page.on("console", msg => console.log(`Page Console: ${msg.text()}`));

    await page.goto('http://localhost:7890/highcharts4.html', {
        waitUntil: "domcontentloaded"
    })

    async function loadChart() {

        console.log('loadChart fs W_OK=' + fs.W_OK)
        console.log('loadChart Highcharts.version=' +
            Highcharts().version) //Works

        await page.evaluate(async (Highcharts, fs) => {

            //fs is defined because we passed it to page.evaluate
            console.log('page.evaluate fs W_OK=' + fs.W_OK)

            //The following statement fails with:
            //(node:3580) UnhandledPromiseRejectionWarning:
            // Error: Evaluation failed:
            // TypeError: Highcharts is not a function
            console.log('page.evaluate Highcharts.version=' +
                Highcharts().version)

            //When uncommented in place of the above, fails with:
            //Highcharts is undefined
            //console.log('page.evaluate Highcharts.version='
            // + Highcharts.version)

            var myChart = Highcharts.chart('container', {
                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]
                }]
            });
        }, Highcharts, fs)
    }

    await loadChart()
    await browser.close()
}

run()

const puppeteer = require('puppeteer')
const fs = require('fs')

async function run() {

    // const browser = await puppeteer.launch({
    //     headless: true
    // })
    const browser = await puppeteer.launch({
        headless: false,
        slowMo: 2000,
        devtools: true
    })

    const page = await browser.newPage()
    page.on("console", msg => console.log(`Page Console: ${msg.text()}`));

    await page.goto('http://localhost:7890/highcharts4.html', {
        waitUntil: "domcontentloaded"
    })

    async function loadChart() {
        //THIS DID THE TRICK!
        page.evaluate(fs.readFileSync('./lib/highcharts/highcharts.js', 'utf8'));

        await page.evaluate(async (fs) => {

            console.log('page.evaluate Highcharts.version='
            + Highcharts.version)

            var myChart = Highcharts.chart('container', {
                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]
                }]
            });
        }, fs)
    }

    await loadChart()
    await browser.close()
}

run()

/**
 * This file creates a highchart, 
 * no html page is required.  The html is crafted
 * within this script.
 */
const puppeteer = require('puppeteer')
const fs = require('fs')

async function run() {

    const browser = await puppeteer.launch({
        headless: true
    })
    // const browser = await puppeteer.launch({
    //     headless: false,
    //     slowMo: 2000,
    //     devtools: true
    // })

    const page = await browser.newPage()
    page.on("console", msg => console.log(`Page Console: ${msg.text()}`));

    const loaded = page.waitForNavigation({
        waitUntil: 'load'
    })

    const html =
        `<!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Highcharts Test 4</title>
        </head>
        <body>
        <div id="container" style="width:100%; height:400px;"></div>
        </body>
        </html>`

    await page.setContent(html)
    await loaded

    async function loadChart() {

        page.evaluate(fs.readFileSync('./lib/highcharts/highcharts.js', 'utf8'));

        await page.evaluate(async (fs) => {

            console.log('page.evaluate Highcharts.version='
                + Highcharts.version)

            var myChart = Highcharts.chart('container', {
                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]
                }]
            });
        }, fs)
    }

    await loadChart()
    await browser.close()
}

run()