chart.js 中文文檔翻譯

時間 2019-11-05

標籤 chart.js chart 中文文檔翻譯欄目 JavaScript 简体版

原文原文鏈接

chart.js Configuration文檔翻譯

tags: chart 文檔翻譯html

[TOC]jquery

Getting start開始

下載

github上得到最新版本 dowloadgit

只是使用cdn cdngithub

安裝

npm

npm install chart.js --savenpm

bower方法

click here to get infocanvas

選擇正確的構建

Chart.js提供了兩種不一樣的構建：Chart.js抑或Chart.min.js，都附帶顏色解析庫。若是使用了該版本，而且要使用時間軸，那麼你須要先引入Moment.js數組

Chart.bundle.js 或者 Chart.bundle.min.js把Moment.js包含在了一個文件中。若是你須要時間軸而且但願兩者在一個文件中，這是個好選擇。ide

<h3 style="color: red;">！若是你以前的版本中使用了Monment.js，那麼就不要使用Chart.bundle.js版本了，由於可能形成未知問題<h3>函數

使用方法

使用老的樣式引入Chart.js工具

<script src="Chart.js"></script>
<script>
    var myChart = new Chart({...})
</script>

使用牛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均可以讓咱們在想要的地方繪製。例子以下

<canvas id="myChart" width="400" height="400"></canvas>

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

一旦你建立了元素或者上下文context，你就能夠去實現預約義的圖標類型，或者本身定義。
下面是一個條狀圖標，顯示的內容是對不一樣顏色的投票，y軸是從零開始。

<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
</script>

不難吧，至此，你能夠開始編寫本身的圖表了，能夠是自定義縮放、工具提示、標籤、顏色、動做等。

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	默認字體大小（在現行縮放的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’。<bar>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來提供文字。‘this’關鍵字表明的是從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’。<bar>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顏色

當給圖表的選項設置顏色時，可使用幾種顏色格式。1、16進制文字; 2、RGB； 3、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
            }]
        }
    })
}