Chart.js（未完）

https://chartjs.cn/docs/latest/

v4.4

Chart.js

社區維護的圖表類型
可通過自定義插件高度自定義，以創建注釋、縮放或拖放功能等等
可以直接使用 Chart.js 或利用維護良好的封裝程序包，以便與你選擇的框架進行更原生的集成。Vue

新手入門

建議為圖表提供 responsiveness 自己的容器
- 注釋：canvas的父元素 size 改變會觸發圖表重繪

<div>
  <canvas id="myChart"></canvas>
</div>

安裝

Chart.js 是 tree-shakeable 的，因此有必要導入并注冊你將要使用的控制器、元素、比例尺和插件
每種類型的圖表都有自己的最低要求（通常是類型的控制器、該控制器使用的元素和比例尺）：

逐步指南

legend
- 注釋：圖例，圖表圖例用于顯示圖表上出現的數據集的相關信息，可用于顯隱數據集
tooltips
- 注釋：工具提示，圖表上hover時展示的信息
氣泡圖允許同時展示三個維度的數據：x 和 y 軸上的位置表示兩個維度，第三個維度由單個氣泡的大小表示
使用插件微調圖表
- 可以使用簡單的臨時插件為其自定義 canvas 背景或添加邊框
插件被定義為具有 name 的對象以及在擴展點中定義的一個或多個回調函數。
- 注釋：定義插件就是定義一個對象，在對象中提供了一些回調函數，這些回調函數能夠接受到通過option配置項傳入插件的值
- 注釋：canvas在繪制時使用同一個對象ctx的相同屬性，為了不影響外部的繪制，在開始新繪制前要通過ctx.save()來把繪圖狀態緩存到棧中，在繪制結束后通過ctx.restore()恢復棧中的最后一個狀態。

// ...

  const chartAreaBorder = {
    id: 'chartAreaBorder',

    beforeDraw(chart, args, options) {
      const { ctx, chartArea: { left, top, width, height } } = chart;

      ctx.save();
      ctx.strokeStyle = options.borderColor;
      ctx.lineWidth = options.borderWidth;
      ctx.setLineDash(options.borderDash || []);
      ctx.lineDashOffset = options.borderDashOffset;
      ctx.strokeRect(left, top, width, height);
      ctx.restore();
    }
  };

  new Chart(
    document.getElementById('dimensions'),
    {
      type: 'bubble',
      plugins: [ chartAreaBorder ],
      options: {
        plugins: {
          chartAreaBorder: {
            borderColor: 'red',
            borderWidth: 2,
            borderDash: [ 5, 5 ],
            borderDashOffset: 2,
          }
        },
        aspectRatio: 1,

// ...

可訪問性

對于 canvas，必須使用 canvas 元素上的 ARIA 屬性添加可訪問性，或者使用放置在開始和結束畫布標簽中的內部回退內容來添加
- 注釋：屏幕閱讀器

顏色

圖表支持三種顏色選項
- 對于幾何元素，你可以更改背景和邊框顏色；
- 對于文本元素，你可以更改字體顏色。
- 還可以更改整個 canvas 背景
如果未指定顏色，則使用 Chart.defaults 中的全局默認顏色：
- 可以通過更新 Chart.defaults 的這些屬性來重置默認顏色：
可以為每個數據集設置 backgroundColor 和 borderColor
- 使用內置的 Colors 插件。它將循環顯示七種 Chart.js 品牌顏色的調色板
  - 只需要導入并注冊插件Chart.register(Colors);
  - 如果你使用的是 UMD 版本的 Chart.js，此插件將默認啟用。你可以通過將 enabled 選項設置為 false 來禁用它：
默認情況下，顏色插件僅在你初始化圖表且未指定任何邊框或背景顏色時才起作用。如果你想強制顏色插件始終為數據集著色，例如，在運行時使用動態數據集時，你需要將 forceOverride 選項設置為 true：
顏色格式
- HSL 或 HSLA
  - 注釋：HSL (色相，飽和度，亮度)
- 可以傳遞 CanvasPattern 或 CanvasGradient 對象而不是字符串顏色來實現一些有趣的效果
  - 注釋：CanvasPattern 表示一種基于圖像的模式，這種模式可以用來填充圖形的內部。即一種圖片即在繪制時應當如何拉伸還是重復。用于畫筆樣式上
  - 注釋：CanvasGradient 用于創建漸變顏色的效果

數據結構

data 屬性的 labels 屬性，它必須包含與具有最多值的數據集相同數量的元素。
- 如果你需要多行標簽，你可以提供一個數組，其中每一行作為數組中的一個條目。

data值的類型

Primitive[]
- 當 data 是數字數組時，相同索引處的 labels 數組中的值用于索引軸（x 用于垂直圖表，y 用于水平圖表）

const cfg = {
  type: 'bar',
  data: {
    datasets: [{
      data: [20, 10],
    }],
    labels: ['a', 'b']
  }
}

Object[]
- 注釋：Object中是固定屬性x，y
- 提供的值必須可以由關聯的尺度或關聯尺度的內部格式解析。一個常見的錯誤是為 category 標度提供整數，它使用整數作為內部格式，其中每個整數代表標簽數組中的一個索引。
- null 可用于跳過的值。
- 可以通過在圖表選項或數據集中指定 parsing: false 來禁用解析。如果禁用解析，則必須對數據進行排序，并采用相關圖表類型和比例在內部使用的格式。
  - 注釋：會自動解析數據進行排序，例如：x: '2016-12-25'時，可以手動關閉解析，手動關閉解析后需要自己維護數據的順序

const cfg = {
  type: 'line',
  data: {
    datasets: [{
      data: [{x: 10, y: 20}, {x: 15, y: null}, {x: 20, y: 10}]
    }]
  }
}

const cfg = {
  type: 'line',
  data: {
    datasets: [{
      data: [{x: '2016-12-25', y: 20}, {x: '2016-12-26', y: 10}]
    }]
  }
}

const cfg = {
  type: 'bar',
  data: {
    datasets: [{
      data: [{x: 'Sales', y: 20}, {x: 'Revenue', y: 10}]
    }]
  }
}

Object[] 使用自定義屬性

const cfg = {
  type: 'bar',
  data: {
    datasets: [{
      data: [{id: 'Sales', nested: {value: 1500}}, {id: 'Purchases', nested: {value: 500}}]
    }]
  },
  options: {
    parsing: {
      xAxisKey: 'id', 
      yAxisKey: 'nested.value' // 如果鍵中包含點，則需要使用雙斜杠進行轉義 data\\.key
    }
  }
}

當使用餅圖/圓環圖、雷達或 polarArea 圖表類型時，parsing 對象應該有一個指向要查看的值的 key 項

const cfg = {
  type: 'doughnut',
  data: {
    datasets: [{
      data: [{id: 'Sales', nested: {value: 1500}}, {id: 'Purchases', nested: {value: 500}}]
    }]
  },
  options: {
    parsing: {
      key: 'nested.value'
    }
  }
}

使用 typescript 時，如果要使用不是默認數據結構的數據結構，則需要在實例化數據變量時將其傳遞給類型接口

import {ChartData} from 'chart.js';

const datasets: ChartData <'bar', {key: string, value: number} []> = {
  datasets: [{
    data: [{key: 'Sales', value: 20}, {key: 'Revenue', value: 10}],
    parsing: {
      xAxisKey: 'key',
      yAxisKey: 'value'
    }
  }],
};

data是對象不是數組
在此模式下，屬性名稱用于 index 比例，值用于 value 比例。對于垂直圖表，索引刻度為 x，值刻度為 y

const cfg = {
  type: 'line',
  data: {
    datasets: [{
      data: {
        January: 10,
        February: 20
      }
    }]
  }
}

數據集配置

label 出現在圖例和工具提示中的數據集標簽。
data 該數據集的數據
clip 如何相對于 chartArea 進行裁剪。正值允許溢出，負值會限制 chartArea 內的許多像素。0 = 在圖表區域剪輯。裁剪也可以每邊配置：clip:
order 數據集的繪制順序。還會影響堆疊、工具提示和圖例的順序。
stack 此數據集所屬組的 ID（堆疊時，每個組將是一個單獨的堆棧）。默認為數據集 type。
parsing 如何解析數據集。可以通過指定解析來禁用解析：在圖表選項或數據集處為 false。如果禁用解析，則必須對數據進行排序，并采用相關圖表類型和比例在內部使用的格式。
hidden 配置數據集的可見性。使用 hidden: true 將隱藏數據集，使其不在圖表中渲染。

字體

全局設置可以更改圖表上的所有字體。這些選項在 Chart.defaults.font 中
- family 所有文本的默認字體系列，遵循 CSS 字體系列選項
  - 如果字體未緩存且需要加載，則在加載字體后需要更新使用該字體的圖表。這可以使用字體加載 API 來完成
- size 文本的默認字體大?。ㄒ韵袼貫閱挝唬?。不適用于 radialLinear 刻度點標簽。
- style 默認字體樣式。不適用于工具提示標題或頁腳。不適用于圖表標題。遵循 CSS 字體樣式選項（即正常、斜體、傾斜、初始、繼承）。
- weight 默認字體粗細（粗體）
- lineHeight 單個文本行的高度
在此圖表中，除圖例中的標簽外，文本的字體大小為 16px

Chart.defaults.font.size = 16;
let chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        plugins: {
            legend: {
                labels: {
                    // This more specific font property overrides the global property
                    font: {
                        size: 14
                    }
                }
            }
        }
    }
});

posted on 2024-09-20 14:00 噬蛇之牙閱讀(90) 評論(0) 收藏舉報

刷新頁面返回頂部