chart 报表相关配置

版权声明：创业：https://shop120085695.taobao.com https://blog.csdn.net/zxf1242652895/article/details/82533982

图表数据

创建图表的时候，需要把创建图表所需的所有数据放入一个数据对象中，然后向图表传递这个对象，这个数据对象可以包含下面这些参数

参数名	类型	描述
datasets	Array[object]	包含有一组数据的数据组。 查阅文档来确定有哪些可用参数是可添加到数据组中的。
labels	Array[string]	跟 category axis 一起使用的可选参数。
xLabels	Array[string]	横向坐标轴 类别
yLabels	Array[string]	纵向坐标轴 类别

绘制带参数创建图表

绘制一个带参数的图表，只需要向图表创建方法传递一个包含所需参数的对象即可。在下面这个例子中，设置了图表是不响应的。

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

全局配置

全局配置这个概念在 Chart.js 1.0 中已经介绍了，全局配置文件可以方便的改变所有的图表样式，或者个性化其中的某一个图表。

Chart.js merges the options object passed to the chart with the global configuration using chart type defaults and scales defaults appropriately. This way you can be as specific as you would like in your individual chart configuration, while still changing the defaults for all chart types where applicable. The global general options are defined in Chart.defaults.global. The defaults for each chart type are discussed in the documentation for that chart type.

The following example would set the hover mode to ‘single’ for all charts where this was not overridden by the chart type defaults or the options passed to the constructor on creation.

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

// Hover mode is set to single because it was not overridden here
var chartInstanceHoverModeSingle = new Chart(ctx, {
    type: 'line',
    data: data,
});

// This chart would have the hover mode that was passed in
var chartInstanceDifferentHoverMode = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        hover: {
            // Overrides the global setting
            mode: 'label'
        }
    }
})

全局字体设置

有4个可以改变全局图表字体样式的参数，这些参数在全局配置文件 Chart.defaults.global 中

名称	类型	默认	描述
defaultFontColor	Color	‘#666’	默认字体颜色
defaultFontFamily	String	“‘Helvetica Neue’, ‘Helvetica’, ‘Arial’, sans-serif”	默认字体
defaultFontSize	Number	12	默认字体大小（单位：px），Does not apply to radialLinear scale point labels
defaultFontStyle	String	‘normal’	默认字体样式。不会应用于提示弹窗的字体。不会应用于图表标题

通用图表配置

下面的设置选项适用于所有的图表， 你可以在全局配置文件中设置 global configuration，也可以在构建图表的时候传递给构建方法。

名称	类型	默认	描述
responsive	Boolean	true	在图表容器canvas变化的时候自适应
responsiveAnimationDuration	Number	0	图表自适应新尺寸所用时间
maintainAspectRatio	Boolean	true	调整大小时保持横纵比
events	Array[String]	[“mousemove”, ”mouseout”,  ”click”, ”touchstart”, ”touchmove”, ”touchend”]	弹出提示小窗口要监听的事件
onClick	Function	null	Called if the event is of type ‘mouseup’ or ‘click’. Called in the context of the chart and passed an array of active elements
legendCallback	Function	function (chart) { }	Function to generate a legend. Receives the chart object to generate a legend from. Default implementation returns an HTML string.
onResize	Function	null	Called when a resize occurs. Gets passed two arguemnts: the chart instance and the new size.

标题配置选项

标题相关配置设置在 options -> title 域中，相关的全局配置在 Chart.defaults.global.title中。

名称	类型	默认	描述
display	Boolean	false	是否显示标题
position	String	‘top’	指定标题的位置。 可用参数有’top’, ‘left’, ‘bottom’ 和’right’
fullWidth	Boolean	true	Marks that this box should take the full width of the canvas (pushing down other boxes)
fontSize	Number	12	文字大小，默认继承全局配置中的设定值
fontFamily	String	“‘Helvetica Neue’, ‘Helvetica’, ‘Arial’, sans-serif”	文字字体，默认继承全局配置中的设定值
fontColor	Color	“#666”	文字颜色，默认继承全局配置中的设定值
fontStyle	String	‘bold’	文字样式，默认继承全局配置中的设定值
padding	Number	10	在标题上下添加的间隔（单位为px）
text	String	”	标题内容

示例

下面的例子会在创建图表的时候会包含标题“自定义图表标题”

var chartInstance = new Chart(ctx, {
    type: 'line',
    data: data, //data这里代表的是数值数组
    options: {
        title: {
            display: true,
            text: '自定义图表标题'
        }
    }
})

图例

图例相关的配置在options -> legend 域中，相关全局配置在Chart.defaults.global.legend中。

名称	类型	默认	描述
display	Boolean	true	是否显示图例
position	String	‘top’	图例位置。可用的位置有上下左右，’top’, ‘left’, ‘bottom’ and ‘right’.
fullWidth	Boolean	true	Marks that this box should take the full width of the canvas (pushing down other boxes)
onClick	Function	function(event, legendItem) {}	A callback that is called when a click is registered on top of a label item
labels	Object	-	参阅下面的 图例文字选项.

图例文字选项

图例文字选项写在图例选项下面的options -> legend -> lables 中。

名称	类型	默认	描述
boxWidth	Number	40	Width of coloured box
fontSize	Number	12	文字大小，默认继承全局配置中的设定值
fontStyle	String	“normal”	文字样式，默认继承全局配置中的设定值
fontColor	Color	“#666”	文字颜色，默认继承全局配置中的设定值
fontFamily	String	“‘Helvetica Neue’, ‘Helvetica’, ‘Arial’, sans-serif”	文字字体，默认继承全局配置中的设定值
padding	Number	10	同行图例之间的 Padding
generateLabels:	Function	function(chart) { }	Generates legend items for each thing in the legend. Default implementation returns the text + styling for the color box. See Legend Itemfor details.
usePointStyle	Boolean	false	Label style will match corresponding point style (size is based on fontSize, boxWidth is not used in this case).

图例接口

Items passed to the legend onClick function are the ones returned from labels.generateLabels. These items must implement the following interface.

{
    // 文字
    text: String,

    // 图例方块颜色
    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
}

示例

下面的例子将创建一个带图例的图表，图例文字颜色设置为红色。

var chartInstance = new Chart(ctx, {
    type: 'bar',
    data: data, //data 数据数组
    options: {
        legend: { //图例相关配置
            display: true,
            labels: { //图例文字
                fontColor: 'rgb(255, 99, 132)'
            }
        }
    }
});

提示弹窗 - 配置选项

tooltip相关配置在 options -> tooltips中，相关的全局配置在 Chart.defaults.global.tooltips中。

名称	类型	默认值	描述
enabled	Boolean	true	是否开启
custom	Function	null	参阅下面的 section 部分
mode	String	‘single’	设置哪个元素要显示在提示弹窗中，可用的参数有 'single', 'label' or'x-axis'.    single 高亮最近的元素。    label 高亮显示所有相同X 数值的元素。    'x-axis' also highlights elements in all datasets at the same X value, but activates when hovering anywhere within the vertical slice of the x-axis representing that X value.
itemSort	Function	undefined	Allows sorting of tooltip items. Must implement a function that can be passed to 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	标题上下的padding
titleMarginBottom	Number	6	标题下方的margin
bodyFontFamily	String	“‘Helvetica Neue’, ‘Helvetica’, ‘Arial’, sans-serif”	内容字体，默认继承全局配置中的设置
bodyFontSize	Number	12	内容字体大小，默认继承全局配置中的设置
bodyFontStyle	String	“normal”	内容字体样式，默认继承全局配置中的设置
bodyFontColor	Color	“#fff”	内容字体颜色，默认继承全局配置中的设置
bodySpacing	Number	2	内容上下的padding
footerFontFamily	String	“‘Helvetica Neue’, ‘Helvetica’, ‘Arial’, sans-serif”	footer字体，默认继承全局配置中的设置
footerFontSize	Number	12	footer字体大小，默认继承全局配置中的设置
footerFontStyle	String	“bold”	footer字体样式
footerFontColor	Color	“#fff”	footer字体颜色
footerSpacing	Number	2	footer上下的padding
footerMarginTop	Number	6	footer上面的margin
xPadding	Number	6	左右的padding
yPadding	Number	6	上下的padding
caretSize	Number	5	对话框引出箭头大小，单位px
cornerRadius	Number	6	圆角大小
multiKeyBackground	Color	“#fff”	Color to draw behind the colored boxes when multiple items are in the tooltip
callbacks	Object		See the callbacks section below

Tooltip 回调

The tooltip label configuration is nested below the tooltip configuration using the callbacks key. The tooltip has the following callbacks for providing text. For all functions, ‘this’ will be the tooltip object created from the Chart.Tooltip constructor.

All functions are called with the same arguments: a tooltip item and the data object passed to the chart. All functions must return either a string or an array of strings. Arrays of strings are treated as multiple lines of text.

Callback	Arguments	Description
beforeTitle	Array[tooltipItem], data	Text to render before the title
title	Array[tooltipItem], data	Text to render as the title
afterTitle	Array[tooltipItem], data	Text to render after the title
beforeBody	Array[tooltipItem], data	Text to render before the body section
beforeLabel	tooltipItem, data	Text to render before an individual label
label	tooltipItem, data	Text to render for an individual item in the tooltip
labelColor	tooltipItem, chartInstace	Returns the colors to render for the tooltip item. Return as an object containing two parameters: borderColor and backgroundColor.
afterLabel	tooltipItem, data	Text to render after an individual label
afterBody	Array[tooltipItem], data	Text to render after the body section
beforeFooter	Array[tooltipItem], data	Text to render before the footer section
footer	Array[tooltipItem], data	Text to render as the footer
afterFooter	Array[tooltipItem], data	Text to render after the footer section

Tooltip Item Interface

The tooltip items passed to the tooltip callbacks implement the following interface.

{
    // 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
}

悬停 - 配置选项

The hover configuration is passed into the options.hover namespace. The global hover configuration is at Chart.defaults.global.hover.

Name	Type	Default	Description
mode	String	‘single’	Sets which elements hover. Acceptable options are 'single', 'label', 'x-axis', or'dataset'.    single highlights the closest element.    label highlights elements in all datasets at the same X value.    'x-axis' also highlights elements in all datasets at the same X value, but activates when hovering anywhere within the vertical slice of the x-axis representing that X value.    dataset highlights the closest dataset.
animationDuration	Number	400	Duration in milliseconds it takes to animate hover style changes
onHover	Function	null	Called when any of the events fire. Called in the context of the chart and passed an array of active elements (bars, points, etc)

动画 - 配置选项

The following animation options are available. The global options for are defined in Chart.defaults.global.animation.

Name	Type	Default	Description
duration	Number	1000	The number of milliseconds an animation takes.
easing	String	“easeOutQuart”	Easing function to use.
onProgress	Function	none	Callback called on each step of an animation. Passed a single argument, an object, containing the chart instance and an object with details of the animation.
onComplete	Function	none	Callback called at the end of an animation. Passed the same arguments as onProgress

动画回调

The onProgress and onComplete callbacks are useful for synchronizing an external draw to the chart animation. The callback is passed an object that implements the following interface. An example usage of these callbacks can be found onGithub. This sample displays a progress bar showing how far along the animation is.

{
    // Chart object
    chartInstance,

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

Animation Object

The animation object passed to the callbacks is of type Chart.Animation. The object has the following parameters.

{
    // 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

The global options for elements are defined in Chart.defaults.global.elements.

Options can be configured for four different types of elements; arc, lines, points, and rectangles. When set, these options apply to all objects of that type unless specifically overridden by the configuration attached to a dataset.

Arc Configuration

Arcs are used in the polar area, doughnut and pie charts. They can be configured with the following options. The global arc options are stored in Chart.defaults.global.elements.arc.

Name	Type	Default	Description
backgroundColor	Color	‘rgba(0,0,0,0.1)’	Default fill color for arcs. Inherited from the global default
borderColor	Color	‘#fff’	Default stroke color for arcs
borderWidth	Number	2	Default stroke width for arcs

曲线图表选项

Line elements are used to represent the line in a line chart. The global line options are stored in Chart.defaults.global.elements.line.

Name	Type	Default	Description
tension	Number	0.4	Default bezier curve tension. Set to 0 for no bezier curves.
backgroundColor	Color	‘rgba(0,0,0,0.1)’	Default line fill color
borderWidth	Number	3	Default line stroke width
borderColor	Color	‘rgba(0,0,0,0.1)’	Default line stroke color
borderCapStyle	String	‘butt’	Default line cap style. See MDN
borderDash	Array	[]	Default line dash. See MDN
borderDashOffset	Number	0.0	Default line dash offset. See MDN
borderJoinStyle	String	‘miter’	Default line join style. See MDN
capBezierPoints	Boolean	true	If true, bezier control points are kept inside the chart. If false, no restriction is enforced.
fill	Boolean	true	If true, the line is filled.
stepped	Boolean	false	If true, the line is shown as a stepped line and ‘tension’ will be ignored

Point Configuration

Point elements are used to represent the points in a line chart or a bubble chart. The global point options are stored in Chart.defaults.global.elements.point.

Name	Type	Default	Description
radius	Number	3	Default point radius
pointStyle	String	‘circle’	Default point style
backgroundColor	Color	‘rgba(0,0,0,0.1)’	Default point fill color
borderWidth	Number	1	Default point stroke width
borderColor	Color	‘rgba(0,0,0,0.1)’	Default point stroke color
hitRadius	Number	1	Extra radius added to point radius for hit detection
hoverRadius	Number	4	Default point radius when hovered
hoverBorderWidth	Number	1	Default stroke width when hovered

Rectangle Configuration

Rectangle elements are used to represent the bars in a bar chart. The global rectangle options are stored in Chart.defaults.global.elements.rectangle.

Name	Type	Default	Description
backgroundColor	Color	‘rgba(0,0,0,0.1)’	Default bar fill color
borderWidth	Number	0	Default bar stroke width
borderColor	Color	‘rgba(0,0,0,0.1)’	Default bar stroke color
borderSkipped	String	‘bottom’	Default skipped (excluded) border for rectangle. Can be one of bottom, left, top, right

颜色

When supplying colors to Chart options, you can use a number of formats. You can specify the color as a string in hexadecimal, RGB, or HSL notations. If a color is needed, but not specified, Chart.js will use the global default color. This color is stored at Chart.defaults.global.defaultColor. It is initially set to ‘rgba(0, 0, 0, 0.1)’;

You can also pass a CanvasGradient object. You will need to create this before passing to the chart, but using it you can achieve some interesting effects.

The final option is to pass a CanvasPattern object. For example, if you wanted to fill a dataset with a pattern from an image you could do the following.

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