aardio 范例: WebView2 - 调用 Chart.js 显示好看的图表

//调用 Chart.js 图表
//aardio 调用 WebView2 浏览器控件加载网页并调用 Chart.js 图表展示数据
//柱状图、条形图、Web 图表
import win.ui;
/*DSG{{*/
var winform = win.form(text="WebView2 - 调用 Chart.js 显示好看的图表";right=966;bottom=622)
winform.add(
button={cls="button";text="点这里更新图表数据";left=255;top=510;right=531;bottom=575;db=1;dl=1;dr=1;z=2};
custom={cls="custom";left=255;top=147;right=736;bottom=460;db=1;dl=1;dr=1;dt=1;z=1}
)
/*}}*/

import web.view;
var wb = web.view(winform.custom);

//在浏览器控件中显示网页并执行 JavaScript 脚本
wb.html = /**
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/Chart.js/4.4.1/chart.umd.js"></script>
</head>
<body>
<div style="width: 95%; margin: auto;">
    <canvas id="chart"></canvas> 
</div>
<script>

let chart = new Chart(document.getElementById('chart'), {
    type: 'bar',
    data: {
        labels: [],
        datasets: [{
            label: '访问量图表',
            data: [],
            backgroundColor: 'rgba(75, 192, 192, 0.6)'
        }]
    },
    options: {
        responsive: true,
        scales: {
            y: {
                beginAtZero: true
            }
        },
        plugins: {
            title: {
                display: true,
                text: '统计图表'
            }
        }
    }
});

updateChart = function(labels,data){
    chart.data.datasets[0].data = data
    chart.data.labels = labels;
    chart.update();
}
</script> 
</body>
</html>
**/

winform.button.oncommand = function(id,event){
    //在 aardio 中调用 JavaScript 函数。
    wb.invoke("updateChart",{"测试1","测试2","测试3"},{1,123,1000});
}

winform.show();
win.loopMessage();
Markdown 格式