chart.js Configuration文档翻译

tags: chart 文档 翻译

[TOC]

Getting start最先

下载

github上取得最新版本 dowload

只是运用cdn cdn

装置

npm

npm install chart.js –save

bower要领

click here to get info

挑选准确的构建

Chart.js供应了两种差别的构建：Chart.js抑或Chart.min.js，都附带色彩剖析库。假如运用了该版本，而且要运用时候轴，那末你须要先引入Moment.js

Chart.bundle.js 或许 Chart.bundle.min.js把Moment.js包含在了一个文件中。假如你须要时候轴而且愿望两者在一个文件中，这是个好挑选。

<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 对象，它包含以下信息。

建立一个带有选项的图表

往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中。

Common Chart Configuration 通用图标设置

下面的设置对一切的图表都是用，他们可以设置在 global configuration,或许在本身的图表中通报

Title Configuration 题目设置

题目设置是在options.title中设置的，全局设置是在Chart.defaults.global.title中定义。

实例

下面例子建立了一个带有名为“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定义

Legend Label Configuration Legend标签设置

被设置在Legend的labels键中

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中设置

Tooltip Callback 回调函数

tooltip callback设置项，被嵌套在tooltip configuration设置相中，运用callbacks关键字。tooltip有一下callback来供应笔墨。‘this’关键字代表的是从Chart.Tooltip组织函数建立的对象。

一切的函数具有配合的参数，tooltip项、data对象，一切的函数都必需返回笔墨string或许数组，数组代表的是多行笔墨。

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

Animation Configuration动画设置

以下动画设置都可见效，全局设置在Chart.defaults.global.animation中定义。

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

Line Configuration 线性设置

线性元素用来描写线性图表，其全局选项存储在Chart.defaults.global.elements.line中

Point Configuration点型设置

点型元素用来设置线性或许泡泡型图表，它的全局选项存储在Chart.default.global.elements.point中。

Rectangle Configuration矩形设置

矩形元素用来绘制条状图表，全局属性设置存储在Chart.defaults.global.element.rectangle中

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
            }]
        }
    })
}