摘要：高亮最近的元素高亮同樣值的數據高亮所有的數據原色，當鼠標懸浮到塊是值被選中。關鍵字代表的是從構造函數創建的對象。高亮最近的數據懸浮時動畫執行的時間，單位，毫秒調用被觸發的任何事件動畫設置以下動畫設置都可生效，全局設置在中定義。

tags: chart 文檔 翻譯

[TOC]

github上獲得最新版本 dowload

只是使用cdn cdn

npm

npm install chart.js --save

click here to get info

Chart.js提供了兩種不同的構建：Chart.js抑或Chart.min.js，都附帶顏色解析庫。如果使用了該版本，并且要使用時間軸，那么你需要先引入Moment.js

Chart.bundle.js 或者 Chart.bundle.min.js把Moment.js包含在了一個文件中。如果你需要時間軸并且希望二者在一個文件中，這是個好選擇。

！如果你之前的版本中使用了Monment.js，那么就不要使用Chart.bundle.js版本了，因為可能造成未知問題

使用方法

使用老的樣式引入Chart.js

使用牛X的方式引入模塊

// Using CommonJS
var Chart = require("src/chart.js")
var myChart = new Chart({...})

// ES6
import Chart from "src/chart.js"
let myChart = new Chart({...})

// Using requirejs
require(["path/to/Chartjs"], function(Chart){
 var myChart = new Chart({...})
})

創建一個圖表

創建圖表我們需要實現圖表類Chart class，要做到這些，我們需要傳進一個節點，jquery實例，或者canvas都可以讓我們在想要的地方繪制。例子如下

// 以下任何形式之一
var ctx = document.getElementById("myChart");
var ctx = document.getElementById("myChart").getContext("2d");
var ctx = $("#myChart");

一旦你創建了元素或者上下文context，你就可以去實現預定義的圖標類型，或者自己定義。
下面是一個條狀圖標，顯示的內容是對不同顏色的投票，y軸是從零開始。

不難吧，至此，你可以開始編寫自己的圖表了，可以是自定義縮放、工具提示、標簽、顏色、動作等。

Global Configuration全局設置

Chart.js 提供了一些選項來改變創建的圖表的外表。這設置選項可以在創建圖表時以設置對象的形式傳入到工廠函數中。
此外，全局的設置能夠影響到每一個新創建的圖表。

Chart Data 圖表數據。

顯示數據，必須傳入一個所需要顯示的信息的給圖表(chart),這個信息是data object --data 對象，它包含以下信息。

Name	Type	Description
datasets	Array[object]	包含每組的數據
labels	Array[string]	可選的參數，用來顯示每個軸的類別
xLabels	Array[string]	可選參數，如果該軸是橫軸適用于軸的種類
yLavels	Array[string]	可選參數，如果該軸是縱軸，使用于軸的種類

創建一個帶有選項的圖表

往Chartjs的構造函數中傳入設置對象。
在下面的例子中，創建一個線性圖表，并且自適應responsive為false。

var chartInstanc = new Chart(ctx, {
    type:"line",
    data:data,
    options:{
        responsive:false
    }
});

全局設置 Global Configuration

這個概念是在chart1.0版時引入，用來是保持DRY(不過多重復代碼)，允許為不同類型圖表設置全局選項，避免挨個設置每個圖表，或者去更改默認設置。

chart.js可以在不改變圖表類型和縮放適應性的情況下通過傳遞全局設置來統一改變他們的設置。因此，你既可以隨意設置自定義的圖表，又可以改變默認的設置。全局選項設置定義在Chart.defaults.global中，每個類型的圖表的默認設置已經在文檔中進行了論述。

下面的例子將設置hover mode為"sigle"，它作用于所有類型的圖表。如果圖表被默認的設置覆蓋，或者在創建圖表時自定義了這個屬性，則不起作用。

Chart.defaults.global.hover.mode = "single";

// 這個圖表將擁有上述的"single"設置，因為他沒有自定義這個模式
var chartInstanceHoverModeSingle = new Chart(ctx, {
    type: "line",
    data: data,
});

// 這個圖表的hover mode會是自己定義的label，因為single被覆蓋了
var chartInstanceDifferentHoverMode = new Chart(ctx, {
    type: "line",
    data: data,
    options: {
        hover: {
            // Overrides the global setting
            mode: "label"
        }
    }
})

全局字體設置

有四個全局屬性可被設置，他們定義在Chart.default.global中。

Name	Type	Default	Description
defaultFontColor	Color	"#666 "	默認全局字體顏色
defaultFontFamily	String	"Helvetica Neue", "Helvetica", "Arial", sans-serif"	默認所有字體
defaultFontSize	Number	12	默認字體大?。ㄔ诂F行縮放的labe兩種無效 )

Common Chart Configuration 通用圖標設置

下面的設置對所有的圖表都是用，他們可以設置在 global configuration,或者在自己的圖表中傳遞

Name	Type	Default	Description
responsive	Boolen	true	當容易改變大小時，自適應圖表大小
responsiveAnimationDuration	Number	0	當resize事件觸發時，動畫執行的時間，單位毫秒
maintaionAspectRatio	Boolean	true	改變大小時，圖表是否保持比例
events	Array[String]	["mouseover", "mouseout", "click", "touchstart", "touchemove", "touchend"]	hovering 和 工具提示應監聽的事件
onClick	Function	null	在圖標中點擊觸發或激活一些元素，函數的參數是元素數組
legendCallback	Function	function(char){}	生成一個legend表單，參數是chart對象，默認返回html文本
onResize	Function	null	當resize觸發時調用，得到兩個參數，圖表實例和大小

Title Configuration 標題設置

標題設置是在options.title中設置的，全局設置是在Chart.defaults.global.title中定義。

Name	Type	Default	Description
display	Boolean	false	Display the titel block
position	String	"top"	設置位置，非全局只允許使用"top"/"bottom"
fullWdith	Boolean	true	設置寬度為canvas的寬度（其他盒子自動下沉不重疊）
fontSize	Number	12	繼承全局字體大小
fontFamily	String	""Helvetica Neue", "Helvetica", "Arial", sans-serif"	繼承全局字體設置
fontColor	Color	"#666"	繼承全局字體顏色
fontStyle	String	"bold"	設置標題樣式
padding	Number	10	上下內邊距
text	String	""	標題內容文本

實例

下面例子創建了一個帶有名為“Custom Chart Title”標題的圖表。

var chartInstance = new Chart(ctx, {
    type: "line",
    data: data,
    options: {
        title: {
            display: true,
            text: "Custom Chart Title"
        }
    }
})

Legend Configuration 說明設置

在options.legend中設置legend，全局設置在Chart.defaults.global.legend定義

Name	Type	Default	Description
display	Boolean	true	Is the legend displayed
position	String	"top"	設置位置，非全局只允許使用"top"/"bottom"
fullWidth	Boolean	true	設置寬度為canvas的寬度（其他盒子自動下沉不重疊）
onClick	Function	function(event, legendItem){}	回調函數，注冊在頂部標簽上
labels	Object	-	查看Legend Label Configuration 說明（下）

Legend Label Configuration Legend標簽設置

被設置在Legend的labels鍵中

Name	Type	Default	Description
boxWidth	Number	40	著色盒子的寬度
fontSize	Number	12	繼承全局字體大小
fontFamily	String	""Helvetica Neue", "Helvetica", "Arial", sans-serif"	繼承全局字體設置
fontColor	Color	"#666"	繼承全局字體顏色
fontStyle	String	"bold"	設置標題樣式
padding	Number	10	上下內邊距
generateLabels:	Function	function(chart){}	生成legend的所有東西，默認執行返回文字加著色盒子，更多查看Legend Item
usePointStyle	Boolean	false	是否匹配相應的點樣式

Legend item Interface Legend界面

該項被傳遞到legend 的onClick的回調函數中，從labels.generateLabels中返回，這項中必須實現下面的接口

{
    // Label that will be displayed
    text: String,

    // Fill style of the legend box
    fillStyle: Color,

    // If true, this item represents a hidden dataset. Label will be rendered with a strike-through effect
    hidden: Boolean,

    // For box border. See https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/lineCap
    lineCap: String,

    // For box border. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash
    lineDash: Array[Number],

    // For box border. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset
    lineDashOffset: Number,

    // For box border. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin
    lineJoin: String,

    // Width of box border
    lineWidth: Number,

    // Stroke style of the legend box
    strokeStyle: Color

    // Point style of the legend box (only used if usePointStyle is true)
    pointStyle: String
}

實例

下面例子將創建一個帶有legend的圖表，并且文字顏色為紅色。

var chartInstance = new Chart(ctx, {
    type: "bar",
    data: data,
    options: {
        legend: {
            display: true,
            labels: {
                fontColor: "rgb(255, 99, 132)"
            }
        }
    }
});

Tooltips Configuration 提示工具設置

提示工具在options.tooltips中設置，全局在Chart.defaults.global.tooptips中設置

Name	Type	Default	Description
enable	Boolear	true	提示工具是否生效
custom	Function	null	查看section（下面）
mode	String	"single"	設置那種元素在tooltips，選擇的設置有‘single’，‘label’，‘x-axis’。single：高亮最近的元素 label：高亮同樣值的數據 x-axis：高亮所有的數據原色，當鼠標懸浮到塊是x值被選中。
itemSort	Function	undefined	允許對tooltip項進行排序，但是執行傳遞到Array.prototype.sort中的函數
backgroundColor	Color	"rgba(0,0,0,0.8)"	背景顏色
titleFontFamily	String	""Helvetica Neue", "Helvetica", "Arial", sans-serif"	繼承全局字體
titleFontSize	Number	12	繼承全局字體大小
titleFontStyle	String	"bold"
titleFontColor	Color	"#fff"	字體顏色
titleSpacing	Number	2	行間距
titleMarginBottom	Number	6	標題底邊距
bodyFontFamily	String	""Helvetica Neue", "Helvetica", "Arial", sans-serif"	繼承全局字體
bodyFontSize	Number	12	字體大小
bodyFontStyle	String	"bold"
bodyFontColor	Color	"#fff"	字體顏色
bodySpacing	Number	2	行間距
footerFontFamily	String	""Helvetica Neue", "Helvetica", "Arial", sans-serif"	字體
footerFontSize	Number	12	字體大小
footerFontStyle	String	"bold"
footerFontColor	Color	"#fff"	字體顏色
footerSpacing	Number	2	行間距
footerMarginTop	Number	6	footer之間的間距
xPadding	Number	6	tooltip左右邊距
yPadding	Number	6	tooltip上下邊距
createSize	Number	5	tooltip箭頭大小，像素單位
cornerRadius	Number	6	拐角比率
muliKeyBackground	Color	"#fff"	Color to draw behind the colored boxes when multiple items are in the tooltip
callbacks	Object	Name	查看callback section部分

Tooltip Callback 回調函數

tooltip callback設置項，被嵌套在tooltip configuration設置相中，使用callbacks關鍵字。tooltip有一下callback來提供文字?！畉his’關鍵字代表的是從Chart.Tooltip構造函數創建的對象。

所有的函數擁有共同的參數，tooltip項、data對象，所有的函數都必須返回文字string或者數組，數組代表的是多行文字。

Callback	Arguments	Description
beforeTitle	Array[tooltipItem], data	渲染標題之前的文字
title	Array[tooltipItem], data	渲染成標題的文字
afterTitle	Array[tooltipItem], data	渲染標題之后的文字
beforeBody	Array[tooltipItem], data	body塊之前的文字
beforeLabel	tooltipItem, data	個人標簽之前的文字
label	tooltipItem, data	個人定義的標簽文字
labelColor	tooltipItem, chartInstace	渲染顏色，有兩個參數邊框顏色borderColor和背景顏色backgroundColor
afterLabel	tooltipItem, data	個人標簽之后的文字
afterBody	Array[tooltipItem], data	body之后的文字
beforeFooter	Array[tooltipItem], data	footer之前的文字
footer	Array[tooltipItem], data	footer文字
afterFooter	Array[tooltipItem], data	footer之后的文字

Tooltip Item Interface tooltip項接口

{
    // X Value of the tooltip as a string
    xLabel: String,

    // Y value of the tooltip as a string
    yLabel: String,

    // Index of the dataset the item comes from
    datasetIndex: Number,

    // Index of this data item in the dataset
    index: Number
}

Hover Configuration hover 設置

hover configuraton在options.hover中設置，全局設置是Chart.defaults.global.hover

Name	Type	Default	Description
mode	String	"single"	設置那種元素在tooltips，選擇的設置有‘single’，‘label’，‘x-axis’。single：高亮最近的元素 label：高亮同樣值的數據 x-axis：高亮所有的數據原色，當鼠標懸浮到塊是x值被選中。 高亮最近的數據
animationDuration	Number	400	懸浮時動畫執行的時間，單位，毫秒
onHover	Function	null	調用被觸發的任何事件

Animation Configuration動畫設置

以下動畫設置都可生效，全局設置在Chart.defaults.global.animation中定義。

Name	Type	Default	Description
duration	Number	1000	動畫執行時間，單位毫秒
easing	String	"easeOutQuart"	使用埃舍爾函數
onProgress	Function	none	動畫的每一步執行的回調函數，傳入一個對象參數，該對象包含一個圖表實例，以及包含細節的動畫對象
onComplete	Function	none	動畫結束時調用的回調函數，參數與onProgress相同

Animation Callbacks 動畫回調函數

圖標動畫的onProgress 和 onComplete回調函數在同步一個額外的繪制時是很有用的。他們的參數對象事先下面的接口。這些會掉函數的使用例子可以在這里找到.這個例子顯示一個程序條，顯示動畫執行時間。

{
    // Chart object
    chartInstance,

    // Contains details of the on-going animation
    animationObject,
}

Animation Object動畫對象

動畫對象是Chart.Animation的一個類型實例，它包括下面的屬性

{
    // Current Animation frame number
    currentStep: Number,

    // Number of animation frames
    numSteps: Number,

    // Animation easing to use
    easing: String,

    // Function that renders the chart
    render: Function,

    // User callback
    onAnimationProgress: Function,

    // User callback
    onAnimationComplete: Function
}

Element Configuration 元素設置

它在Chart.defaults.global.elements中定義全局設置

Options可以設置四中不同的元素類型：arc弧,lines線性,points點,ande rectangles矩形.一旦設置，該類型中的對象都將執行，除非在dataset中設置覆蓋。

Arc Configuration

Arcs 被用在極地、環、餅狀圖標中。下面是他們的設置。全局arc設置保存在Chart.default.global.elements.arc

Name	Type	Default	Description
backgroundColor	Color	"rgba(0,0,0,0.1)"	默認的填充顏色
borderColor	Color	"#fff"	默認線條顏色
borderWidth	Number	2	默認線條寬度

Line Configuration 線性設置

線性元素用來描繪線性圖表，其全局選項存儲在Chart.defaults.global.elements.line中

Name	Type	Default	Description
tension	Number	0.4	默認貝塞爾曲線張力設置，設置為0時，沒有曲線張力
backgroundColor	Color	"rgba(0,0,0,0.1)"	默認填充顏色
borderWidth	Number	3	線的寬度
borderColor	Color	"rgba(0,0,0,0.1)"	默認線的顏色
borderCapStyle	String	"butt"	默認線的一端的樣式
borderDash	Array	[]	默認線條波折線樣式
borderDashOffset	Number	0.0	默認波折線間距
borderJoinStyle	String	"miter"	默認線波折連接樣式
capBezierPoints	Boolean	true	如果值為true則控制圖表內部點，為false則不控制
fill	Boolean	true	如果是true則為線填充顏色
stepped	Boolean	false	如果是true則線的樣式是折線，張力會無效

Point Configuration點型設置

點型元素用來設置線性或者泡泡型圖表，它的全局選項存儲在Chart.default.global.elements.point中。

Name	Type	Default	Description
radius	Number	3	默認半徑
pointStyle	String	"circle"	默認樣式
backgroundColor	Color	"rgba(0,0,0,0.1)"	默認填充顏色
borderWidth	Number	1	默認邊的寬度
borderColor	Color	"rgba(0,0,0,0.1)"	默認邊的顏色
hitRadius	Number	1	鼠標懸浮時額外增加的半徑
hoverRadius	Number	4	鼠標放上去是的默認半徑
hoverBorderWidth	Number	1	鼠標放上去時默認線寬

Rectangle Configuration矩形設置

矩形元素用來繪制條狀圖表，全局屬性設置存儲在Chart.defaults.global.element.rectangle中

Name	Type	Default	Description
backgroundColor	Color	"rgba(0,0,0,0.1)"	默認條顏色
borderWidth	Number	0	默認條的線寬
borderColor	Color	"rgba(0,0,0,0.1)"	默認條的線的顏色
borderSkipped	String	"bottom"	默認的跳躍邊界

Color顏色

當給圖表的選項設置顏色時，可以使用幾種顏色格式。一、16進制文字; 二、RGB； 三、HSL符號。如果需要顏色但是又沒有去自定義，圖表就回去使用默認顏色。默認顏色存儲在Chart.defaults.global.defaultColor.它的初始值是"rgb(0,0,0,0.1)"。

你也可以傳遞一個CanvasGradient對象，傳遞之前需先創建。

最后的設置項是傳遞一個CanvasPattern對象。例如，如果你想要填充數據到一個圖片上，如下！

var img = new Image();
img.src = "https://example.com/my_image.png";
img.onload = function() {
    var ctx = document.getElementById("canvas").getContext("2d");
    var fillPattern = ctx.createPattern(img, "repeat");

    var chart = new Chart(ctx, {
        data: {
            labels: ["Item 1", "Item 2", "Item 3"],
            datasets: [{
                data: [10, 20, 30],
                backgroundColor: fillPattern
            }]
        }
    })
}