feature: add bar chart

ArcticLampyrid · May 9, 2020 · 0833aa3 · 0833aa3
1 parent ee5322a
commit 0833aa3
Show file tree

Hide file tree

Showing 4 changed files with 126 additions and 18 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -47,6 +47,7 @@
     "dependencies": {
         "bootstrap": "^4.4.1",
         "chart.js": "^2.9.3",
+        "chartjs-plugin-datalabels": "^0.7.0",
         "custom-electron-titlebar": "^3.2.0",
         "electron-updater": "^4.3.1",
         "jquery": "^3.5.1",
@@ -61,6 +62,7 @@
         "@types/node": "12.12.21",
         "@types/request-promise-native": "^1.0.17",
         "@types/uuid": "^7.0.3",
+        "@types/chart.js": "^2.9.20",
         "electron": "^8.2.5",
         "electron-builder": "^22.6.0",
         "typescript": "^3.8.3"

diff --git a/src/client/examination_detail.html b/src/client/examination_detail.html
@@ -13,6 +13,8 @@
     <script type="text/javascript" src="../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
     <link rel="stylesheet" href="../../node_modules/chart.js/dist/Chart.min.css" type="text/css">
     <script type="text/javascript" src="../../node_modules/chart.js/dist/Chart.min.js"></script>
+    <script type="text/javascript"
+        src="../../node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.min.js"></script>
     <script>
         require("../../dist/client/examination_detail.js");
     </script>
@@ -46,7 +48,24 @@ <h4 class="subject-name d-inline">全科</h4>
             <div class="progress">
                 <div class="progress-bar" id="exam-score-progress"><span id="exam-percentage"></span></div>
             </div>
-            <canvas id="radarChart" style="max-width: 500px;" class="mx-auto mt-3"></canvas>
+            <ul class="nav nav-tabs border-bottom-0 mt-3">
+                <li class="nav-item">
+                    <a class="nav-link active" data-toggle="tab" id="radarChart-tab"
+                        href="#radarChart-container">雷达图</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" data-toggle="tab" id="barChart-tab" href="#barChart-container">柱状图</a>
+                </li>
+            </ul>
+            <div class="tab-content border" id="chart-tab-content">
+                <div class="tab-pane fade show active" id="radarChart-container">
+                    <canvas id="radarChart" style="max-width: 500px;" class="mx-auto mt-3"></canvas>
+                </div>
+                <div class="tab-pane fade" id="barChart-container">
+                    <canvas id="barChart" style="max-width: 500px;" class="mx-auto mt-3"></canvas>
+                </div>
+                <a id="chart-save-button" class="btn btn-link text-right d-block" download="result.png" href="">保存</a>
+            </div>
         </div>
     </div>
 

diff --git a/src/client/examination_detail.ts b/src/client/examination_detail.ts
@@ -4,7 +4,8 @@ import * as querystring from 'querystring';
 import * as Sugar from 'sugar';
 
 declare global {
-    var Chart: any;
+    var Chart: typeof import('chart.js');
+    var ChartDataLabels: any
 }
 
 $(async () => {
@@ -45,43 +46,115 @@ $(async () => {
         $("#exam-percentage").text(Sugar.Number.format(Sugar.Number.round(examPercentage, 2), 2) + "%");
         $("#exam-score-progress").width(examPercentage.toString() + "%");
 
-        var myRadarChart = new Chart(document.getElementById("radarChart") as HTMLCanvasElement, {
+        var chartLabels = info.result.paperList.map(x => x.subjectName);
+        var chartDataValue = info.result.paperList.map(x => x.userScore / x.standardScore * 100);
+        new Chart(document.getElementById("radarChart") as HTMLCanvasElement, {
             type: 'radar',
             data: {
-                labels: info.result.paperList.map(x => x.subjectName),
-                datasets: [{
-                    label: "",
-                    data: info.result.paperList.map(x => x.userScore / x.standardScore * 100),
-                    fill: true,
-                    backgroundColor: "rgba(54, 162, 235, 0.2)",
-                    borderColor: "rgb(54, 162, 235)",
-                    pointBackgroundColor: "rgb(54, 162, 235)",
-                    pointBorderColor: "#fff",
-                    pointHoverBackgroundColor: "#fff",
-                    pointHoverBorderColor: "rgb(54, 162, 235)"
-                }
+                labels: chartLabels,
+                datasets: [
+                    {
+                        label: "",
+                        data: chartDataValue,
+                        fill: true,
+                        backgroundColor: "rgba(54, 162, 235, 0.2)",
+                        borderColor: "rgb(54, 162, 235)",
+                        pointBackgroundColor: "rgb(54, 162, 235)",
+                        pointBorderColor: "#fff",
+                        pointHoverBackgroundColor: "#fff",
+                        pointHoverBorderColor: "rgb(54, 162, 235)"
+                    }
                 ]
             },
             options: {
                 legend: {
                     display: false
                 },
                 tooltips: {
+                    displayColors: false,
                     callbacks: {
-                        label: x => Sugar.Number.format(Sugar.Number.round(x.yLabel, 2), 2) + "%",
+                        label: x => Sugar.Number.format(Sugar.Number.round(x.yLabel as number, 2), 2) + "%",
                         title: () => null,
                     }
                 },
                 scale: {
                     ticks: {
                         min: 0,
                         max: 100,
-                        callback: function (value: number) {
-                            return value + "%";
+                        callback: x => x + "%"
+                    }
+                },
+                plugins: {
+                    datalabels: {
+                        display: false
+                    }
+                }
+            }
+        });
+
+        new Chart(document.getElementById("barChart") as HTMLCanvasElement, {
+            plugins: [ChartDataLabels],
+            type: 'bar',
+            data: {
+                labels: chartLabels,
+                datasets: [
+                    {
+                        label: "",
+                        data: chartDataValue,
+                        fill: true,
+                        backgroundColor: [
+                            'rgba(255, 99, 132, 0.6)',
+                            'rgba(54, 162, 235, 0.6)',
+                            'rgba(255, 206, 86, 0.6)',
+                            'rgba(75, 192, 192, 0.6)',
+                            'rgba(153, 102, 255, 0.6)',
+                            'rgba(255, 159, 64, 0.6)',
+                            'rgba(255, 99, 132, 0.6)',
+                            'rgba(54, 162, 235, 0.6)',
+                            'rgba(255, 206, 86, 0.6)',
+                            'rgba(75, 192, 192, 0.6)',
+                            'rgba(153, 102, 255, 0.6)'
+                        ],
+                        borderColor: "rgb(54, 162, 235)",
+                        pointBackgroundColor: "rgb(54, 162, 235)",
+                        pointBorderColor: "#fff",
+                        pointHoverBackgroundColor: "#fff",
+                        pointHoverBorderColor: "rgb(54, 162, 235)"
+                    }
+                ]
+            },
+            options: {
+                legend: {
+                    display: false
+                },
+                tooltips: {
+                    displayColors: false,
+                    callbacks: {
+                        label: (x) => info.result.paperList[x.index].userScore
+                            + " (" + Sugar.Number.format(Sugar.Number.round(x.yLabel as number, 2), 2) + "%)",
+                    }
+                },
+                scales: {
+                    yAxes: [{
+                        ticks: {
+                            min: 0,
+                            max: 100,
+                            callback: x => x + "%"
                         }
+                    }]
+                },
+                plugins: {
+                    datalabels: {
+                        formatter: (value, context) => info.result.paperList[context.dataIndex].userScore,
+                        align: "start",
+                        anchor: "end",
                     }
                 }
             }
         });
+        $("#chart-save-button").click(() => {
+            var ctx = document.querySelector("#chart-tab-content .active canvas") as HTMLCanvasElement;
+            $("#chart-save-button").attr("href", ctx.toDataURL("image/png"));
+        })
     }
 });