Tạo output html graph, data exccel csv...

tuhocvba · 5/3/23

Với output excel mà trên đó cần thể hiện graph, thì có vẻ như ADO không hỗ trợ được. Điều đó có nghĩa là chúng ta phải mở file excel đó lên (Workbooks.Open) để thao tác, điều này sẽ dẫn tới xử lý sẽ bị chậm và mất nhiều thời gian.
Trong trường hợp này mình đề xuất tạo ra output là html sử dụng chart.js để hiển thị đồ thị.
Mình giả thiết có dữ liệu như sau cần hiển thị trên biểu đồ.

Bạn cần đăng nhập để thấy đính kèm

File chart.js là mã nguồn mở, cung cấp dưới cuối bài viết.

Bạn cần đăng nhập để thấy đính kèm

Ở đây mình tập trung vào nội dung file html :

HTML:

<div>

<canvas id="myChart" style="width:100%;max-width:700px"></canvas>
</div>

<script src="js/Chart.js"></script>


<script>
  const ctx = document.getElementById('myChart');

  new Chart(ctx, {
    type: 'line',
    data: {
      labels: [0.11,
    0.12,
    0.13,
    0.14,
    0.15,
    0.16,
    0.17,
    0.18],
      datasets: [{
        label: 'THVBA',
        data: [0,
    0,
    0,
    1,
    1,
    1,
    0,
    0],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
</script>

Kết quả:

Bạn cần đăng nhập để thấy đính kèm

Đồ thị liên tục, tôi muốn chỉnh thành dạng xung vuông và đang ở chế độ fill, tức là tô màu vùng dữ liệu khác 0, bây giờ tôi sẽ điều chỉnh thành :

Mã:

steppedLine: true,
    fill: false,

Ngoài ra tôi cũng muốn điều chỉnh màu sắc cho đồ thị. Cụ thể:

HTML:

<div>

<canvas id="myChart" style="width:100%;max-width:700px"></canvas>
</div>

<script src="js/Chart.js"></script>


<script>
window.chartColors = {
    red: 'rgb(255, 99, 132)',
    orange: 'rgb(255, 159, 64)',
    yellow: 'rgb(255, 205, 86)',
    green: 'rgb(75, 192, 192)',
    blue: 'rgb(54, 162, 235)',
    purple: 'rgb(153, 102, 255)',
    grey: 'rgb(201, 203, 207)'
};
  const ctx = document.getElementById('myChart');

  new Chart(ctx, {
    type: 'line',
    data: {
      labels: [0.11,
    0.12,
    0.13,
    0.14,
    0.15,
    0.16,
    0.17,
    0.18],
      datasets: [{
        label: 'THVBA',
        data: [0,
    0,
    0,
    1,
    1,
    1,
    0,
    0],
    steppedLine: true,
    fill: false,
    borderColor: window.chartColors.red,
        borderWidth: 2
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
</script>

Kết quả:

Bạn cần đăng nhập để thấy đính kèm

tuhocvba · 5/3/23

Link ví dụ các bạn tải ở đây:

Bạn cần đăng nhập để thấy link

Bây giờ giả định tôi có nhiều tín hiệu cần hiển thị trong một đồ thị, ta có:

HTML:

<!DOCTYPE html>
<html>
<script src="js/Chart.js"></script>
<body>
<canvas id="myChart" style="width:100%;max-width:600px"></canvas>

<script>
var xValues = [0.11,0.12,0.13,0.14,0.15,0.16];

new Chart("myChart", {
  type: "line",
  data: {
    labels: xValues,
    datasets: [{
      label: 'THVBA',
      data: [1,1,1,0,0,0],
      steppedLine: true,
      borderColor: "red",
      fill: false
    }, {
      label: 'THVBA1',
      data: [0,0,0,1,1,1],
      steppedLine: true,
      borderColor: "green",
      fill: false
    }, {
      label: 'THVBA3',
      data: [0,0,1,1,0,0],
      steppedLine: true,
      borderColor: "blue",
      fill: false
    }]
  },
  options: {
    legend: {display: true}
  }
});
</script>

Kết quả:

Bạn cần đăng nhập để thấy đính kèm

Nếu như các bạn muốn hiển thị mỗi tín hiệu là một đồ thị chung, ta có:

HTML:

<!DOCTYPE html>
<html>
<script src="js/Chart.js"></script>
<body>
<canvas id="myChart" style="width:100%;max-width:600px"></canvas>
<canvas id="myChart2" style="width:100%;max-width:600px"></canvas>
<script>
var xValues = [0.11,0.12,0.13,0.14,0.15,0.16];

new Chart("myChart", {
  type: "line",
  data: {
    labels: xValues,
    datasets: [{
      label: 'THVBA',
      data: [1,1,1,0,0,0],
      steppedLine: true,
      borderColor: "red",
      fill: false
    }]
  },
  options: {
    legend: {display: true}
  }
});

new Chart("myChart2", {
  type: "line",
  data: {
    labels: xValues,
    datasets: [{
      label: 'THVBA2',
      data: [0,0,1,1,0,0],
      steppedLine: true,
      borderColor: "red",
      fill: false
    }]
  },
  options: {
    legend: {display: true}
  }
});
</script>

Kết quả :

Bạn cần đăng nhập để thấy đính kèm

Dựa vào code trên các bạn thấy rằng khi chúng ta code VBA, chúng ta chỉ cần code tạo ra xValues = [0.11,0.12,0.13,0.14,0.15,0.16] và các mảng data tương ứng , ví dụ data: [1,1,1,0,0,0].
Tôi rất muốn html + javascirpt để tự động đọc file csv và load ra đồ thị trên html. Tuy nhiên những code mà tôi tham khảo thì cần phải có localhost, tức là cài đặt sever ảo. Hoặc trên html có nút select chọn file csv rồi hiển thị ra, đây là điều tôi không thích.
Cài sever ảo thì bỏ qua, vì nó cách rách quá.
Click chọn file csv cũng là điều tôi không muốn, tôi muốn csv để chung thư mục với html thì khi bật html sẽ tự động load được ra. Đây là vấn đề mà tôi chưa làm được. Các bạn có thể khai thác thêm vấn đề này để hoàn thiện topic này giúp mình nhé.

tuhocvba · 5/3/23

Nếu như mảng data của tôi chứa các phần tử rỗng thì sao. Trong thực tế dữ liệu excel hay csv vẫn có thể có những dòng rỗng. Tôi sẽ thử tạo ra mảng data có những phần tử rỗng xem điều gì sẽ xảy ra nhé.

HTML:

<!DOCTYPE html>
<html>
<script src="js/Chart.js"></script>
<body>
<canvas id="myChart" style="width:100%;max-width:600px"></canvas>
<canvas id="myChart2" style="width:100%;max-width:600px"></canvas>
<script>
var xValues = [0.11,0.12,0.13,0.14,0.15,0.16];

new Chart("myChart", {
  type: "line",
  data: {
    labels: xValues,
    datasets: [{
      label: 'THVBA',
      data: [,1,1,0,0,0],
      steppedLine: true,
      borderColor: "red",
      fill: false
    }]
  },
  options: {
    legend: {display: true}
  }
});

new Chart("myChart2", {
  type: "line",
  data: {
    labels: xValues,
    datasets: [{
      label: 'THVBA2',
      data: [0,0,,1,0,0],
      steppedLine: true,
      borderColor: "red",
      fill: false
    }]
  },
  options: {
    legend: {display: true}
  }
});
</script>

Kết quả:

Bạn cần đăng nhập để thấy đính kèm

tuhocvba · 5/3/23

Xuất table từ dữ liệu excel ra html.
Code mẫu tôi tham khảo ở đây:

Mã:

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_intro

Tôi có dữ liệu Excel hoặc CSV như sau:

Bạn cần đăng nhập để thấy đính kèm

Output mong muốn như sau:

Bạn cần đăng nhập để thấy đính kèm

Mã:

Sub vidu()
    Dim s As String
    Dim arr
    Dim i&, j&
    Dim optmp$
    
    Dim lk2$
    
    Dim fileStream
    With ThisWorkbook.Sheets(1)
        arr = .Range(.Cells(1, 1), .Cells(419, 11))
    End With
    optmp = "<!DOCTYPE html>" & Chr(13)
    optmp = optmp & "<html>" & Chr(13)
    optmp = optmp & "<head>" & Chr(13)
    optmp = optmp & "<style>" & Chr(13)
    optmp = optmp & "table {" & Chr(13)
    optmp = optmp & vbTab & "font-family: arial, sans-serif;" & Chr(13)
    optmp = optmp & vbTab & "border-collapse: collapse;" & Chr(13)
    optmp = optmp & vbTab & "width: 100%;" & Chr(13)
    optmp = optmp & "}" & Chr(13)
    optmp = optmp & "td, th {" & Chr(13)
    optmp = optmp & vbTab & "border: 1px solid #dddddd;" & Chr(13)
    optmp = optmp & vbTab & "text-align: left;" & Chr(13)
    optmp = optmp & vbTab & "padding: 8px;" & Chr(13)
    optmp = optmp & "}" & Chr(13)
    optmp = optmp & "tr:nth-child(even) {" & Chr(13)
    optmp = optmp & vbTab & "background-color: #dddddd;" & Chr(13)
    optmp = optmp & "}" & Chr(13)
    optmp = optmp & "</style>" & Chr(13)
    optmp = optmp & "</head>" & Chr(13)
    optmp = optmp & "<body>" & Chr(13)
    optmp = optmp & "<h2>HTML Table</h2>" & Chr(13)
    optmp = optmp & "<table>"
    For i = LBound(arr, 1) To UBound(arr, 1) Step 1
        If i = LBound(arr, 1) Then
            optmp = optmp & Chr(13) & vbTab & "<tr>" & Chr(13)
            For j = LBound(arr, 2) To UBound(arr, 2) Step 1
             optmp = optmp & vbTab & vbTab & "<th>" & CStr(arr(i, j)) & "</th>" & Chr(13)
            Next j
            optmp = optmp & Chr(13) & vbTab & "</tr>"
        Else
            optmp = optmp & Chr(13) & vbTab & "<tr>"
            For j = LBound(arr, 2) To UBound(arr, 2) Step 1
             optmp = optmp & vbTab & vbTab & "<td>" & CStr(arr(i, j)) & "</td>" & Chr(13)
            Next j
            optmp = optmp & Chr(13) & vbTab & "</tr>"
        End If
    Next i
    
    optmp = optmp & "</table>" & Chr(13)
    optmp = optmp & "</body>" & Chr(13)
    optmp = optmp & "</html>" & Chr(13)
    
    lk2 = "D:\Graph\table.html"
    Set fileStream = CreateObject("ADODB.Stream")
    fileStream.Charset = "utf-8"
    fileStream.Open
    fileStream.WriteText optmp
    fileStream.SaveToFile lk2, 2 ' 2: Create Or Update
    fileStream.Close
End Sub

tuhocvba · 5/3/23

Trong trường hợp bạn muốn thể hiện cả graph và dữ liệu thì html sẽ theo cấu trúc sau:

HTML:

...
<body>

<div>
<canvas id="myChart" style="width:100%;max-width:700px"></canvas>
</div>
<h2>HTML Table</h2>
<div>
    <table>...</table>
</div>

</body>

<script src="js/Chart.js"></script>
<script>
    ....Graph....
</script>
</html>

Bạn cần đăng nhập để thấy đính kèm

Euler · 5/3/23

Nếu chúng ta muốn giấu table đi, chúng ta có thể tận dụng code như sau:

HTML:

...
<body>

<div>
<canvas id="myChart" style="width:100%;max-width:700px"></canvas>
</div>

<div>
<details>HTML Table</summary>
    <table>...</table>
</details>
</div>

</body>

<script src="js/Chart.js"></script>
<script>
    ....Graph....
</script>
</html>

Bạn cần đăng nhập để thấy đính kèm

Nguồn tham khảo :

Mã:

https://stackoverflow.com/questions/28615544/how-to-create-spoiler-text

tuhocvba · 11/3/23

Đồ thị hai trục tung:

JavaScript:

var canvas = document.getElementById('chart');
new Chart(canvas, {
  type: 'line',
  data: {
    labels: ['1', '2', '3', '4', '5'],
    datasets: [{
      label: 'A',
      yAxisID: 'A',
      data: [100, 96, 84, 76, 69]
    }, {
      label: 'B',
      yAxisID: 'B',
      data: [1, 1, 1, 1, 0]
    }]
  },
  options: {
    scales: {
      yAxes: [{
        id: 'A',
        type: 'linear',
        position: 'left',
      }, {
        id: 'B',
        type: 'linear',
        position: 'right',
        ticks: {
          max: 1,
          min: 0
        }
      }]
    }
  }
});

Cụ thể:

HTML:

<!DOCTYPE html>
<html>
<script src="js/Chart.js"></script>
<body>
<div style="width:75%;">
  <canvas id="chart" style="width:100%;max-width:600px"></canvas>
</div>
<script>
var canvas = document.getElementById('chart');
new Chart(canvas, {
  type: 'line',
  data: {
    labels: ['1', '2', '3', '4', '5'],
    datasets: [{
      label: 'A',
      yAxisID: 'A',
     borderColor: "red",
     fill: false,
      data: [100, 96, 84, 76, 69]
    }, {
      label: 'B',
      yAxisID: 'B',
      fill: false,
      borderColor: "blue",
      data: [1, 1, 1, 1, 0]
    }]
  },
  options: {
    legend: {display: true},
    scales: {
      yAxes: [{
        id: 'A',
        type: 'linear',
        position: 'left',
      }, {
        id: 'B',
        type: 'linear',
        position: 'right',
        ticks: {
          max: 1,
          min: 0
        }
      }]
    }
  }
});
</script>
</body>
</html>

Bạn cần đăng nhập để thấy đính kèm

Nguồn tham khảo:

Mã:

https://stackoverflow.com/questions/38085352/how-to-use-two-y-axes-in-chart-js-v2

Tạo output html graph, data exccel csv...

tuhocvba

Administrator

tuhocvba

Administrator

tuhocvba

Administrator

tuhocvba

Administrator

tuhocvba

Administrator

Euler

Administrator

tuhocvba

Administrator