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://lib.baomitu.com/Chart.js/3.7.1/chart.min.js"></script>
        <style>
        #chart-container {
            width: 100%;
            height: 100%;
            position: relative;
        }
        #chart {
            width: 100% !important;
            height: 100% !important;
        }
    </style>
</head>
<body>
<canvas id="chart"></canvas> 
<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"},{math.random(5000,10000),math.random(1,5000),math.random(1,10000)});
}

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