图表 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';