基于 Highcharts 實現 Vue 中的答題統計柱狀圖組件

在現代 Web 開發中，數據可視化是一個重要的組成部分，而 Highcharts 是一個廣泛使用的 JavaScript 圖表庫，可以幫助開發者在 Web 頁面上輕松地繪制豐富的圖表。在本文中，我們將基于 Highcharts 創建一個用于答題統計的柱狀圖，并在 Vue.js 中進行集成。我們的目標是通過一個 Vue 組件顯示答題正確數和錯誤數的柱狀圖，圖表會根據外部數據進行動態更新。

1. 項目結構與需求分析

首先，需求是實現一個顯示答題統計的柱狀圖。這個圖表將有兩個數據系列——正確答案數和錯誤答案數。每個題型（如單選、多選、判斷等）將作為 X 軸的分類，而 Y 軸將表示每個題型的答對和答錯的數量。為了滿足這些需求，我們將使用 Highcharts 來生成圖表，并通過 Vue.js 作為容器，管理和渲染數據。

效果：

2. 創建 Vue 組件

我們將首先創建一個 Vue 組件，該組件通過 chartData 屬性接收外部傳入的數據。這些數據包含了每個題型的答對和答錯的數量。組件的結構包括圖表容器以及用于初始化圖表的 JavaScript 邏輯。

2.1. `template`?部分

<template><!-- 圖表容器 --><div id="questionAnsweringStatistics"></div>
</template>

在 template 部分，我們創建了一個簡單的容器 div，用來放置生成的圖表。Highcharts 會將圖表渲染到這個 div 中。

2.2. `script`?部分

import Highcharts from 'highcharts'

這行代碼導入了 Highcharts 庫，它是用來繪制圖表的核心庫。這里我們通過 import 語法導入 Highcharts，以便在組件中使用。

2.3.?`props`?定義部分

props: {chartData: {type: Array,default: () => [ // 定義些一些假數據，展示使用{questionType: "1",rightNums: [1, 0, 0],nums: [3, 0, 0]},{questionType: "2",rightNums: [2, 0, 0],nums: [4, 0, 0]},{questionType: "3",rightNums: [0, 1, 0],nums: [0, 2, 0]},{questionType: "4",rightNums: [0, 2, 0],nums: [0, 2, 0]},{questionType: "5",rightNums: [0, 1, 0],nums: [0, 1, 0]},{questionType: "6",rightNums: [0, 0, 0],nums: [2, 0, 1]}]}
}

props?用來接收父組件傳遞的數據，這里的?chartData?是一個數組，包含題目類型的統計數據（rightNums?和?nums）。
chartData?是一個必須傳遞的數組，它包含了題目類型的統計信息。這樣可以靈活地將不同的數據傳遞給圖表組件進行動態渲染。
default?設置了默認值，以便便展示，一般設為空數組。如果父組件沒有傳遞?chartData，則會使用這個默認數據來渲染圖表。此數據格式與實際應用中的結構一致：rightNums?表示答對的題目數，nums?表示總題目數。

2.4.?`watch`?監聽?`chartData`?變化：

watch: {chartData: {handler(newVal) {newVal && this.initChart(newVal); // 數據變化時重新初始化圖表},deep: true}
}

watch?用來監聽?chartData?的變化，確保當父組件傳遞的數據發生變化時，我們能及時更新圖表。
handler(newVal)?是一個回調函數，每當?chartData?更新時，它會被調用并傳入新值?newVal，然后重新調用?initChart?渲染圖表。
deep: true?是為了確保能夠檢測到對象內部屬性的變化，防止?chartData?中的嵌套數據發生改變時無法觸發更新。

2.5.?`mounted`?生命周期鉤子：

mounted() {this.chartData && this.initChart(this.chartData); // 組件掛載時初始化圖表
}

在?mounted?中，我們檢查是否存在?chartData（即數據是否已傳遞到組件），如果存在則調用?initChart?方法初始化圖表。
initChart?方法會將?chartData?數據傳遞進去，渲染圖表。

2.6.?`processData`?數據處理方法：

processData(data) {let name = [], error = [], success = []; // 題目類型，錯誤數，正確數data.forEach(item => {const totalQuestions = item.nums.reduce((pre, cur) => pre + cur, 0); // 總問題數if (totalQuestions > 0) {name.push(this.questionTypeFilter(item.questionType));  // 轉換題目類型error.push(totalQuestions - item.rightNums.reduce((pre, cur) => pre + cur, 0)); // 計算錯誤數success.push(item.rightNums.reduce((pre, cur) => pre + cur, 0)); // 計算正確數}});return { name, error, success }; // 返回處理后的數據
}

processData?是數據預處理的核心函數。它對?chartData?中的每個數據項進行處理，提取出圖表需要的數據。
name: 存儲每個題型的名稱（如“單選題”、“判斷題”等）。這個名稱來自?questionTypeFilter?方法的轉換。
error?和?success: 分別存儲每個題型的錯誤數和正確數。通過對?rightNums?和?nums?數組的累加計算得出。
reduce?是用來對數組求和的常用方法，這里通過它來計算每個題型的總數和正確數量。
最終返回一個對象，包含?name,?error,?success，這三項數據是后續 Highcharts 渲染的基礎。

2.7.?`questionTypeFilter`?方法：

questionTypeFilter(num) {const typeMap = {'1': '單選','2': '多選','3': '判斷','4': '閱文解答','5': '問答題','6': '填空題',};return typeMap[String(num)] || '未知類型'; // 默認為未知類型
}

questionTypeFilter?方法用于將題型編號轉換為題型名稱（例如，“1” 轉換為 “單選”）。
typeMap?是一個映射對象，將題型編號與其對應的名稱進行映射。
String(num)?將傳入的?num?轉為字符串類型，因為?typeMap?的鍵是字符串類型的。
如果傳入的題型編號沒有匹配到?typeMap?中的任何鍵，則返回?'未知類型'。

2.8.?`initChart`?圖表初始化：

initChart(data) {const { name, error, success } = this.processData(data); // 獲取處理后的數據if (this.chart) {this.chart.destroy(); // 銷毀舊的圖表實例}const chartOptions = {chart: {type: 'column', // 設置柱狀圖類型backgroundColor: 'transparent', // 背景透明height: 380, // 圖表高度},title: {text: '答題正確數', // 圖表標題align: 'left',y: this.fontSize * 0.8, // 微調標題位置style: {fontSize: `${this.fontSize * 0.8}px`,fontWeight: 'bold', // 標題加粗},},xAxis: {categories: name, // X軸顯示題目類型tickWidth: 0,lineColor: '#999', // 設置X軸線條顏色labels: {style: {fontSize: `${this.fontSize * 0.6}px`, // 設置X軸標簽字體大小},},},yAxis: {min: 0, // Y軸從0開始title: { enabled: false }, // 關閉Y軸標題gridLineColor: '#999', // 設置網格線顏色},legend: {align: 'right',verticalAlign: 'top',floating: true, // 圖例浮動itemStyle: {fontSize: `${this.fontSize * 0.6}px`, // 設置圖例字體大小},},plotOptions: {column: {cursor: 'pointer', // 鼠標懸浮顯示小手stacking: 'normal', // 堆疊柱狀圖dataLabels: {enabled: true, // 啟用數據標簽style: {textOutline: 'none', // 去掉文字外框fontSize: `${this.fontSize * 0.6}px`, // 設置數據標簽字體大小},},},},series: [{name: '錯誤',color: 'rgb(247, 163, 92)', // 錯誤答案的顏色data: error, // 錯誤數據},{name: '正確',color: 'rgb(124, 181, 236)', // 正確答案的顏色data: success, // 正確數據},],credits: { enabled: false }, // 禁用版權信息exporting: { enabled: false }, // 禁用導出功能};this.chart = Highcharts.chart('questionAnsweringStatistics', chartOptions); // 渲染圖表
}

initChart?方法用于初始化并渲染 Highcharts 圖表。圖表的配置項被詳細定義在?chartOptions?中。
首先，通過?this.processData(data)?獲取處理后的數據，包括題目類型名稱、正確數和錯誤數。
如果已有圖表實例（this.chart）存在，先銷毀舊的圖表實例，避免在頁面中存在多個圖表實例。
圖表配置項（chartOptions）包括了：
- type: 'column'：指定圖表類型為柱狀圖。
- title：設置圖表標題及樣式。
- xAxis：設置 X 軸，顯示題型名稱（name）。
- yAxis：設置 Y 軸，顯示正確數和錯誤數。
- legend：設置圖例（正確、錯誤），以及圖例樣式。
- series：設置數據系列，這里定義了兩組數據：錯誤?和?正確，分別對應?error?和?success?數組。
最后，通過?Highcharts.chart()?方法將配置項應用到圖表，并渲染到頁面中的?#questionAnsweringStatistics?容器中。