aardio 文档

aardio 范例: Sciter 调用图表组件: Chart.js

//入门
import win.ui;
/*DSG{{*/
var winform = win.form(text="Sciter 调用图表组件: Chart.js";right=1063;bottom=729)
winform.add(
button={cls="button";text="aardio 修改数据";left=832;top=683;right=990;bottom=723;db=1;dr=1;z=2};
lbBrowser={cls="static";left=15;top=8;right=1053;bottom=680;db=1;dl=1;dr=1;dt=1;z=1}
)
/*}}*/

import web.sciter; 
import web.sciter.compatibility.chart;
var sciter = web.sciter(winform.lbBrowser);

import web.sciter.debug;
sciter.attachEventHandler( web.sciter.debug );

sciter.external = {
    getData = function(){
        var data = {{
            label: '# of Votes',
            data: {12, 19, 3, 5, 2, 3},
            backgroundColor: {
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            },
            borderColor: {
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            },
            borderWidth: 1
        }}

        //转换为纯 JS 对象
        return web.sciter.jsObject(data,true);
    };
} 

winform.button.oncommand = function(id,event){ 
    sciter.doScript( `
    chart.data.datasets[0].data[2] = %d;  
    chart.update();
    `,math.random(1,100) );
}

/*
实际开发建议下载 JS,CSS 到本地。
中文文档请参考: https://chartjs.bootcss.com
*/ 

sciter.html = /**
<!doctype html>
<html>
<head>
    <meta charset="utf-8"> 
    <script src="https://lib.baomitu.com/Chart.js/3.9.1/chart.js"></script>
   <style>
      canvas { 
        display:block;
      }
    </style>
</head>
<body > 

<canvas id="myChart" style="width:100%;height:100%;"></canvas> 

<script>

window.chart = new Chart(document.getElementById('myChart'), {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets:  ( external.getData() )
    } 
});
</script>
</body>
</html>
**/

winform.show();
return win.loopMessage();

Markdown 格式