vis.js使用

DogLeftover發表於2024-03-14
JS

案例1

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>vis.js 折線圖</title>  
    <!-- 引入 vis.js 庫 -->  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>  
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css">  
</head>  
<body>  
  
<div id="visualization"></div>  
  
<script>  
    // 準備資料  
    var items = [  
        {x: '2023-01-01', y: 3},  
        {x: '2023-01-02', y: 10},  
        {x: '2023-01-03', y: 56}, 
        {x: '2023-01-04', y: 79},  
        {x: '2023-01-05', y: 30},  
        {x: '2023-01-06', y: 19}, 
        {x: '2023-01-07', y: 58},  
        {x: '2023-01-08', y: 25},  
        {x: '2023-01-09', y: 89}, 
        {x: '2023-01-10', y: 44},  
        {x: '2023-01-11', y: 77},  
        {x: '2023-01-12', y: 15}, 
        {x: '2023-01-13', y: 85},  
        {x: '2023-01-14', y: 18},  
        {x: '2023-01-15', y: 95}, 
        {x: '2023-01-16', y: 26},  
        {x: '2023-01-17', y: 35},  
        {x: '2023-01-17', y: 59}, 
        {x: '2023-01-19', y: 85},  
        {x: '2023-01-20', y: 48},  
        {x: '2023-01-21', y: 95}, 
    ];  
  
    var dataset = new vis.DataSet(items);  
  
    // 建立折線圖  
    var options = {  
        start: '2023-01-01',  
        end: '2023-01-10',  
        drawPoints: {  
            style: 'circle'  
        },  
        dataAxis: {  
            showGrid: true,  
            showMinorLabels: true  
        }  
    };  
  
    var graph2d = new vis.Graph2d(document.getElementById('visualization'), dataset, null, options);  
</script>
  
</body>  
</html>
  • 效果圖
點選檢視詳情

相關文章