图表 MDB Pro component
图表-Bootstrap 5和Material Design 2.0
MDB图表是数据的直观表示。它们反应迅速且易于定制。 您可以使用八种类型的图表,其中有多种自定义选项。
注意:阅读 API 标签以找到所有可用选项,然后 高级定制。
笔记2: 也可以看看 高级图表文档 查看高级选项的实现。
影片教学
条形图
您可以使用 data-mdb-attribute
初始化简单的图表-不需要
任何其他JS代码。
注意:此方法仅允许一个数据集-需要更复杂的图表 JavaScript初始化。
通过data-mdb-attributes:
通过Javascript初始化实现了相同的效果:
折线图
要使用我们的简约折线图,请将 type
选项设置为 line
。
通过data-mdb-attributes:
通过JavaScript:
条形图水平
通过设置将条形图的方向从垂直更改为水平
horizontalBar
的 type
选项。
通过data-mdb-attributes:
通过JavaScript:
饼形图
类型为 pie
的图表将圆分成几段来表示一个
数据集的值(面积百分比)。
通过data-mdb-attributes:
通过JavaScript:
甜甜圈图
将数据表示为面积百分比的另一种图形是甜甜圈图。
通过data-mdb-attributes:
通过JavaScript:
极坐标图
极区图会将圆分成相等角度和不同半径的片段。
通过data-mdb-attributes:
通过JavaScript:
雷达图
这种类型的图表将根据数据集的值将区域包围起来。
通过data-mdb-attributes:
通过JavaScript:
气泡图
该图以自定义坐标和半径的一系列“气泡”可视化数据。
注意:如前所述,具有多个数据集的图表 可通过data-mdb-attributes使用。所有更复杂的结构都需要 通过JavaScript初始化。
散点图
使用此图表将数据表示为具有x和y坐标的一系列点。
注意:此图表还需要通过JavaScript进行初始化。初始化 通过data-mdb-attributes是不可能的。
带有自定义选项的条形图
MDB为每个图表提供默认选项-您可以通过传递一个对象轻松更改它 与您的图表构造函数的自定义选项。
注意:阅读 API标签以了解有关可用选项的更多信息。
图表 - API
在本节中,您将找到有关
图表
组件。您将了解此组件中需要哪些模块,
配置组件的可能性是什么,可以使用哪些事件和方法
使用它。
用法
通过数据属性
您可以在不使用其他JavaScript代码的情况下初始化简单的图表-只需设置
data-mdb-chart
到选定图表的类型(例如'line','bar')。
注意:散点
和气泡
图表必须使用
JavaScript。
Name | Type | Description |
---|---|---|
data-mdb-chart
|
String | Attribute responsible for initialization and defining a type. |
data-mdb-labels
|
String | Labels for x-axis |
data-mdb-dataset-label
|
String | Label values for datasets |
data-mdb-dataset-background-color
|
Color[ ] | A single color or an array of colors for datasets |
data-mdb-dataset-border-color
|
Color[ ] | A single border or line color or an array of border colors for datasets |
data-mdb-dataset-border-width
|
Number[ ] | Single border thickness or a border thickness table for datasets |
data-mdb-dataset-data
|
Number[ ] | Value sets for charts |
<canvas
class="col-sm-12 col-md-10 col-xl-8 mb-4"
data-mdb-chart="bar"
data-mdb-dataset-label="Traffic"
data-mdb-labels="['Monday', 'Tuesday' , 'Wednesday' , 'Thursday' , 'Friday' , 'Saturday' , 'Sunday ']"
data-mdb-dataset-data="[2112, 2343, 2545, 3423, 2365, 1985, 987]"
></canvas>
通过JavaScript
使用Chart构造函数初始化实例时,可以指定三个参数。
第一个参数是图表的包装元素,第二个参数是具有以下内容的 data
对象
有关显示的数据集的必要信息。最后是 options
-每个图表
具有组件提供的默认设置,因此此参数是可选的。
<canvas id="bar-chart"></canvas>
// Bar chart
const dataBar = {
type: 'bar',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'Traffic',
data: [30, 15, 62, 65, 61, 65, 40],
},
],
},
};
new mdb.Chart(document.getElementById('bar-chart'), dataBar);
Via jQuery
注意:默认情况下,MDB 不包含jQuery,并且您拥有 自行添加到项目中。
<canvas id="bar-chart"></canvas>
// Bar chart
const dataBar = {
type: 'bar',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'Traffic',
data: [30, 15, 62, 65, 61, 65, 40],
},
],
},
};
$('#bar-chart').chart(dataBar);
选件
线路选项
折线图允许为每个数据集指定多个属性。此外,其中一些 (例如,所有point *属性)都可以定义为数组-这样,第一个值适用 到第一点,第二到第二点,依此类推。
Name | Type | Description |
---|---|---|
label
|
String | The label for the dataset that appears in the legend and tooltips. |
xAxisID
|
String | The ID of the x-axis to plot this dataset on. If not specified, this defaults to the ID of the first found x-axis |
yAxisID
|
String | The ID of the y-axis to plot this dataset on. If not specified, this defaults to the ID of the first found y-axis. |
backgroundColor
|
Color | The fill color under the line. |
borderColor
|
Color | The color of the line. |
borderWidth
|
Number | The width of the line in pixels. |
borderDash
|
Number | The length and spacing of dashes. |
borderDashOffset
|
Number | Offset for line dashes. |
borderCapStyle
|
String | Cap style of the line. |
borderJoinStyle
|
String | Line joint style. |
cubicInterpolationMode
|
String | The algorithm used to interpolate a smooth curve from the discrete data points. |
fill
|
Boolean/String | How to fill the area under the line. |
lineTension
|
Number | Bezier curve tension of the line. Set to 0 to draw straight lines. This option is ignored if monotone cubic interpolation is used. |
pointBackgroundColor
|
Color/Color[ ] | The fill color for points. |
pointBorderColor
|
Color/Color[ ] | The border color for points. |
pointBorderWidth
|
Number/Number[ ] | The width of the point border in pixels. |
pointRadius
|
Number/Number[ ] | The radius of the point shape. If set to 0, the point is not rendered. |
pointStyle
|
String/String[ ]/Image/Image[ ] | Style of the point. |
pointRotation
|
Number/Number[ ] | The rotation of the point in degrees. |
pointHitRadius
|
Number/Number[ ] | The pixel size of the non-displayed point that reacts to mouse events. |
pointHoverBackgroundColor
|
Color/Color[ ] | Point background color when hovered. |
pointHoverBorderColor
|
Color/Color[ ] | Point border color when hovered. |
pointHoverBorderWidth
|
Number/Number[ ] | The border width of a point when hovered over. |
pointHoverRadius
|
Number/Number[ ] | The radius of the point when hovered over. |
showLine
|
Boolean | If false, the line is not drawn for this dataset. |
spanGaps
|
Boolean | If true, lines will be drawn between points with no or null data. If false, points with NaN data will create a break in the line |
steppedLine
|
Boolean/String | If the line is shown as a stepped line. |
酒吧选项
条形图允许为每个数据集指定多个属性。此外,其中一些 可以定义为数组-这样,第一个值将应用于第一个条,第二个将 到第二个酒吧,等等。
Name | Type | Description |
---|---|---|
label
|
String | The label for the dataset which appears in the legend and tooltips. |
xAxisID
|
String | The ID of the x axis to plot this dataset on. If not specified, this defaults to the ID of the first found x axis |
yAxisID
|
String | The ID of the y axis to plot this dataset on. If not specified, this defaults to the ID of the first found y axis. |
backgroundColor
|
Color/Color[ ] | The fill color of the bar. |
borderColor
|
Color/Color[ ] | The color of the bar border. |
borderWidth
|
Number/Number[ ] | The stroke width of the bar in pixels. |
borderSkipped
|
String | Which edge to skip drawing the border for. |
hoverBackgroundColor
|
Color/Color[ ] | The fill colour of the bars when hovered. |
hoverBorderColor
|
Color/Color[ ] | The stroke colour of the bars when hovered. |
hoverBorderWidth
|
Number/Number[ ] | The stroke width of the bars when hovered. |
雷达图
雷达图允许为每个数据集指定多个属性。此外,其中一些 (例如,所有point *属性)都可以定义为数组-这样,第一个值适用 到第一点,第二到第二点,依此类推。
Name | Type | Description |
---|---|---|
label
|
String | The label for the dataset which appears in the legend and tooltips. |
backgroundColor
|
Color | The fill color under the line. |
borderColor
|
Color | The color of the line. |
borderWidth
|
Number | The width of the line in pixels. |
borderDash
|
Number[ ] | Length and spacing of dashes. S |
borderDashOffset
|
Number | Offset for line dashes. |
borderCapStyle
|
String | Cap style of the line |
borderJoinStyle
|
String | Line joint style |
fill
|
Boolean/String | How to fill the area under the line. |
lineTension
|
Number | Bezier curve tension of the line. Set to 0 to draw straightlines. |
pointBackgroundColor
|
Color/Color[ ] | The fill color for points. |
pointBorderColor
|
Color/Color[ ] | The border color for points. |
pointBorderWidth
|
Number/Number[ ] | The width of the point border in pixels. |
pointRadius
|
Number/Number[ ] | TThe radius of the point shape. If set to 0, the point is not rendered. |
pointRotation
|
Number/Number[ ] | The rotation of the point in degrees. |
pointStyle
|
String/String[ ]/Image/Image[ ] | Style of the point. |
pointHitRadius
|
Number/Number[ ] | The pixel size of the non-displayed point that reacts to mouse events. |
pointHoverBackgroundColor
|
Color/Color[ ] | Point background color when hovered. |
pointHoverBorderColor
|
Color/Color[ ] | Point border color when hovered. |
pointHoverBorderWidth
|
Number/Number[ ] | Border width of point when hovered. |
pointHoverRadius
|
Number/Number[ ] | The radius of the point when hovered. |
甜甜圈和馅饼
在Donut和Pie图表中,将值数组传递给选项将应用它们中的每一个 到数据集中的对应条目。
Name | Type | Description |
---|---|---|
backgroundColor
|
Color[ ] | The fill color of the arcs in the dataset. |
borderColor
|
Color[ ] | The border color of the arcs in the dataset. |
borderWidth
|
Number[ ] | The border width of the arcs in the dataset. |
hoverBackgroundColor
|
Color[ ] | The fill colour of the arcs when hovered. |
hoverBorderColor
|
Color[ ] | The stroke colour of the arcs when hovered. |
hoverBorderWidth
|
Number[ ] | The stroke width of the arcs when hovered. |
极地面积图
极地面积图类似于饼图,但是每个段的角度相同,但不同 半径(取决于值)。
Name | Type | Description |
---|---|---|
backgroundColor
|
Color | The fill color of the arcs in the dataset. |
borderColor
|
Color | The border color of the arcs in the dataset. |
borderWidth
|
number | The border width of the arcs in the dataset. |
hoverBackgroundColor
|
Color | The fill colour of the arcs when hovered. |
hoverBorderColor
|
Color | The stroke colour of the arcs when hovered. |
hoverBorderWidth
|
number | The stroke width of the arcs when hovered. |
气泡图
气泡图显示具有x和y坐标的一系列点。z坐标 确定每个气泡的大小。
Name | Type | Description |
---|---|---|
backgroundColor
|
Color | bubble background color |
borderColor
|
Color | bubble border color |
borderWidth
|
Number | bubble border width (in pixels) |
hoverBackgroundColor
|
Color | bubble background color when hovered |
hoverBorderColor
|
Color | bubble border color when hovered |
hoverBorderWidth
|
Number | bubble border width when hovered (in pixels) |
hoverRadius
|
Number | bubble additional radius when hovered (in pixels) |
hitRadius
|
Number | bubble additional radius for hit detection (in pixels). |
label
|
String | The label for the dataset which appears in the legend and tooltips. |
order
|
Number | The drawing order of dataset. |
pointStyle
|
String | bubble shape style. |
rotation
|
Number | bubble rotation (in degrees). |
radius
|
Number | bubble radius (in pixels). |
散点图
散点图将数据集显示为具有z和y坐标的一系列点。
散点图支持与折线图相同的属性。
Legend
Name | Type | Default | Description |
---|---|---|---|
display
|
Boolean | true | showing legend |
position
|
String | 'top' | Position of the legend. |
fullWidth
|
Boolean | true | Marks that this box should take the full width of the canvas (pushing down other boxes). This is unlikely to need to be changed in day-to-day use. |
onClick
|
Function |
A callback that is called when a click event is registered on a label item |
|
onHover
|
Function |
A callback that is called when a 'mousemove' event is registered on top of a label item |
|
reverse
|
Boolean | false |
Legend will show datasets in reverse order. |
labels
|
Object |
See documentation about labels in table below. |
图例标签配置
Name | Type | Default | Description |
---|---|---|---|
boxWidth
|
Number | 40 | width of coloured box |
fontSize
|
Number | 12 | font size of text |
fontStyle
|
String | 'normal' | font style of text |
fontColor
|
Color | '#666' |
Color of text |
fontFamily
|
String | "Roboto" |
Font family of legend text. |
padding
|
Number | 10 |
Padding between rows of colored boxes. . |
generateLabels
|
Function |
Generates legend items for each thing in the legend. Default implementation returns the text + styling for the color box. |
|
filter
|
Function | null |
Filters legend items out of the legend. Receives 2 parameters, a Legend Item and the chart data. |
usePointStyle
|
Boolean | false |
Label style will match corresponding point style (size is based on fontSize, boxWidth is not used in this case). |
backgroundColor
|
Style/Null | Null |
Background color of datalabels. . |
动画
You can customize the chart's animation with the following options:
Name | Type | Default | Description |
---|---|---|---|
duration
|
Number | 1000 | The number of milliseconds an animation takes |
easing
|
String | easeOutQuart | Easing function to use. |
onProgress
|
Function | null | Callback called at the end of an animation. |
onComplete
|
Function | null |
Callback called on each step of an animation. |
缓和
可用选项:
linear
easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeInQuart
easeOutQuart
easeInOutQuart
easeInQuint
easeOutQuint
easeInOutQuint
easeInSine
easeOutSine
easeInOutSine
easeInExpo
easeOutExpo
easeInOutExpo
easeInCirc
easeOutCirc
easeInOutCirc
easeInElastic
easeOutElastic
easeInOutElastic
easeInBack
easeOutBack
easeInOutBack
easeInBounce
easeOutBounce
easeInOutBounce
方法
Name | Description | Example |
---|---|---|
update(data, config)
|
Updates chart's data and calls .update(config) method |
instance.update(data, { duration: 800})
|
dispose
|
Removes a mdb.Chart instance |
instance.dispose()
|
const instance new mdb.Chart(el, data, options);
instance.dispose();
大事记
图表中的事件处理与其他MDB组件不同-
options
参数,您可以定义应触发哪些事件和处理程序
对于其中的一些(单击,悬停)。
Name | Type | Default | Description |
---|---|---|---|
events
|
string[ ] |
['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove']
|
The events option defines the browser events
that the chart should listen to for tooltips and hovering.
|
onHover |
function | null |
Called when any of the events fire. Called in the context of the chart and passed the event and an array of active elements (bars, points, etc). |
onClick
|
function | null |
Called if the event is of type
'mouseup' or
'click' . Called in the context of the chart and
passed the event and an array of active elements.
|
const eventOption ={
options: {
// This chart will not respond to mousemove, etc
events: ['click']
}
};
进口
MDB UI KIT 也可与模块捆绑器一起使用。使用以下代码导入 此组件:
import { Chart } from 'mdb-ui-kit';