chart.js Configuration文档翻译

chart 文档 翻译

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包含在了一个文件中。如果你需要时间轴并且希望二者在一个文件中，这是个好选择。

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

使用方法

使用老的样式引入Chart.js

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

使用牛逼的方式引入模块

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

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

当给图表的选项设置颜色时，可以使用几种颜色格式。一、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
            }]
        }
    })
}