如何在 React 中建立可存取的圖表：包容性資料視覺化指南-js教程-PHP中文網

如何在 React 中建立可存取的圖表：包容性資料視覺化指南

WBOY

發布： 2024-08-09 07:13:02

原創

395 人瀏覽過

How to Create Accessible Charts in React: A Guide to Inclusive Data Visualisation

什麼是資料視覺化中的可訪問性

資料視覺化是溝通的關鍵，但對於殘疾人來說可能無法實現。資料視覺化的可存取性對於確保所有使用者（無論能力如何）都能理解圖表並與圖表互動至關重要。 Highcharts 擁有創建可存取圖表的工具和功能，依賴螢幕閱讀器的使用者將受益於正確的標籤和註釋。

選擇正確的圖表類型

不同的圖表類型適合不同的資料和使用者需求。例如，長條圖非常適合分類資料和趨勢。選擇正確的圖表類型是清晰資料視覺化的關鍵。 Highcharts 有多種圖表類型，包括長條圖、折線圖和散佈圖，因此您可以選擇最適合您的資料的圖表類型。

用於有效資料視覺化的長條圖

長條圖對於顯示分類資料以及比較多個類別和子類別的值特別有用。 Highcharts 為長條圖提供了廣泛的自訂選項，例如調整顏色、大小和標籤，從而更輕鬆地根據特定的輔助功能需求自訂圖表。此外，長條圖可用於建立小倍數，這對於同時顯示多個資料系列非常有效。

使用 Highcharts 在 React 中建立可存取的圖表

建立易於存取的圖表意味著遵循清晰的設計原則並確保所有使用者都可以存取所有視覺元素。標籤和註釋對於螢幕閱讀器使用者和弱視使用者來說至關重要。 Highcharts 可讓您在圖表中新增標籤和註釋，以便使用者可以理解資料。也可以透過使用高對比度顏色和不基於顏色的編碼來考慮色盲。

設計原則

簡單：圖表應該簡單且易於理解。
簡潔標籤：使用清晰簡潔的標籤和註解。
輔助功能：使用螢幕閱讀器支援和高對比色彩。

Highcharts 擁有創建清晰且易於訪問的圖表的工具和功能，因此所有用戶都可以輕鬆閱讀您的視覺化效果。

標籤和註釋

標籤和註釋是讓螢幕閱讀器使用者和低視力使用者可以存取圖表的關鍵。 Highcharts 具有添加標籤和註釋的功能，因此所有資訊都能清楚傳達。標籤和註釋應該簡單並為圖表提供足夠的上下文。

使用 Highcharts 庫建立易於存取的圖表

Highcharts 可以輕鬆建立具有多種選項的易於存取的圖表。以下是如何在 React 應用程式中建立簡單的可存取圖表：

程式碼範例：

安裝 highcharts 和 highcharts-react-official 套件：

npm install highcharts highcharts-react-official

登入後複製

建立一個簡單的長條圖組件：

import React from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import HighchartsAccessibility from 'highcharts/modules/accessibility';

HighchartsAccessibility(Highcharts);

export const AccessibleChart = () => {
  const options = {
    title: {
      text: 'Accessible chart example'
    },
    series: [
      {
        data: [1, 2, 3, 4, 5]
      }
    ],
    accessibility: {
      enabled: true,
      description: 'This is an example of an accessible chart.'
    }
  };

  return (
    <HighchartsReact highcharts={Highcharts} options={options} />
  );
};

登入後複製

在此範例中，匯入並初始化 HighchartsAccessibility 模組以啟用輔助功能。圖表配置中的輔助功能選項為螢幕閱讀器提供了說明。