xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

Chart.js

可视化动态 CPU 性能监控

https://github.com/gildata/RAIO/issues/337

https://github.com/chartjs/Chart.js/issues/13#issuecomment-396140908

chart.js disable animation

http://www.chartjs.org/docs/latest/developers/updates.html#preventing-animations

https://www.chartjs.org/docs/latest/developers/api.html

https://stackoverflow.com/questions/21389341/disable-animation-with-charts-js

point

http://www.chartjs.org/docs/latest/charts/line.html?h=point

http://www.chartjs.org/docs/latest/configuration/elements#point-styles


    // Global point options
    Chart.defaults.global.elements.point.pointStyle = "circle";
    // Chart.defaults.global.elements.point.pointStyle = "line";
    Chart.defaults.global.elements.point.radius = 0;

cpu-momery

Canvas

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage

crossorigin="anonymous"

SRI


<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js " integrity="sha256-XF29CBwU1MWLaGEnsELogU6Y6rcc5nCkhhx89nFMIDQ=" crossorigin="anonymous"></script>

CPU status monitor

disable animation

update data

https://codepen.io/webgeeker/pen/jKBqge

https://codepen.io/webgeeker/full/KeWWZg/

https://codepen.io/webgeeker/pen/PapKOM


<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="xgqfrms">
    <meta name="generator" content="VS code">
    <title>CPU Memory</title>
    <style>
        [data-box="contanier"] {
             300px;
            height: 200px;
        }
    </style>
</head>

<body>
    <section>
        <h1>CPU Memory</h1>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js " integrity="sha256-XF29CBwU1MWLaGEnsELogU6Y6rcc5nCkhhx89nFMIDQ=" crossorigin="anonymous"></script>
        <section>
            <div data-box="contanier">
                <canvas id="myChart" width="300" height="200"></canvas>
            </div>
            <script>
                let data = [12, 19, 3, 5, 2, 3, 12, 9, 3, 15];
                var ctx = document.getElementById("myChart").getContext("2d");
                var myChart = new Chart(ctx, {
                    // type: "bar ",
                    type: "line",
                    data: {
                        labels: [" ", " ", " ", " ", " ", " ", " ", " ", " ", " "],
                        datasets: [{
                            label: "CPU 使用记录",
                            data: data,
                            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,
                            fill: "start",
                        }]
                    },
                    options: {
                        scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero: true
                                }
                            }]
                        },
                        elements: {
                            line: {
                                tension: 0,
                                // no smooth
                            }
                        }
                    }
                });
                // update
                let flag = setInterval(() => {
                    let newData = data[0],
                        oldData = data.slice(1);
                    oldData.push(newData)
                    data = [].concat(oldData);
                    myChart.data.datasets[0].data = data;
                    myChart.update(0);
                    // disable animation
                }, 1000);
            </script>
        </section>
    </section>
</body>

</html>

https://stackoverflow.com/questions/17354163/dynamically-update-values-of-a-chartjs-chart

null


const RA = (datas = [], num = 1, debug = false) => {
    let result = "";
    let str = `${datas.toString()},`;
    str = str.repeat(num);
    str = str.slice(0, str.length - 1);
    result = str.split(`,`);
    result = result.map(item => {
        let newItem = "";
        if (item !== "") {
            newItem = (item.trim() !== "") ? parseFloat(item) : "";
        }else {
            newItem = null;
        }
        return newItem;
    });
    if (debug) {
        console.log(`result =
`, result);
    }
    return result;
};


let a = [null];

RA(a, 3);

// [null, null, null]