图表 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是不可能的。

HTML
JavaScript


          <canvas id="scatter-chart"></canvas>


          // Chart
          const dataScatter = {
            type: 'scatter',
            data: {
              datasets: [
                {
                  borderColor: '#4285F4',
                  backgroundColor: 'rgba(66, 133, 244, 0.5)',
                  label: 'V(node2)',
                  data: [
                    {
                      x: 1,
                      y: -1.711e-2,
                    },
                    {
                      x: 1.26,
                      y: -2.708e-2,
                    },
                    {
                      x: 1.58,
                      y: -4.285e-2,
                    },
                    {
                      x: 2.0,
                      y: -6.772e-2,
                    },
                    {
                      x: 2.51,
                      y: -1.068e-1,
                    },
                    {
                      x: 3.16,
                      y: -1.681e-1,
                    },
                    {
                      x: 3.98,
                      y: -2.635e-1,
                    },
                    {
                      x: 5.01,
                      y: -4.106e-1,
                    },
                    {
                      x: 6.31,
                      y: -6.339e-1,
                    },
                    {
                      x: 7.94,
                      y: -9.659e-1,
                    },
                    {
                      x: 10.0,
                      y: -1.445,
                    },
                    {
                      x: 12.6,
                      y: -2.11,
                    },
                    {
                      x: 15.8,
                      y: -2.992,
                    },
                    {
                      x: 20.0,
                      y: -4.102,
                    },
                    {
                      x: 25.1,
                      y: -5.429,
                    },
                    {
                      x: 31.6,
                      y: -6.944,
                    },
                    {
                      x: 39.8,
                      y: -8.607,
                    },
                    {
                      x: 50.1,
                      y: -1.038e1,
                    },
                    {
                      x: 63.1,
                      y: -1.223e1,
                    },
                    {
                      x: 79.4,
                      y: -1.413e1,
                    },
                    {
                      x: 100.0,
                      y: -1.607e1,
                    },
                    {
                      x: 126,
                      y: -1.803e1,
                    },
                    {
                      x: 158,
                      y: -2e1,
                    },
                    {
                      x: 200,
                      y: -2.199e1,
                    },
                    {
                      x: 251,
                      y: -2.398e1,
                    },
                    {
                      x: 316,
                      y: -2.597e1,
                    },
                    {
                      x: 398,
                      y: -2.797e1,
                    },
                    {
                      x: 501,
                      y: -2.996e1,
                    },
                    {
                      x: 631,
                      y: -3.196e1,
                    },
                    {
                      x: 794,
                      y: -3.396e1,
                    },
                    {
                      x: 1000,
                      y: -3.596e1,
                    },
                  ],
                },
              ],
            },
          };

          const optionsScatter = {
            options: {
              title: {
                display: true,
                text: 'Scatter Chart - Logarithmic X-Axis',
              },
              scales: {
                xAxes: [
                  {
                    type: 'logarithmic',
                    position: 'bottom',
                    ticks: {
                      userCallback: function (tick) {
                        var remain = tick / Math.pow(10, Math.floor(Chart.helpers.log10(tick)));
                        if (remain === 1 || remain === 2 || remain === 5) {
                          return tick.toString() + 'Hz';
                        }
                        return '';
                      },
                    },
                    scaleLabel: {
                      labelString: 'Frequency',
                      display: true,
                    },
                  },
                ],
                yAxes: [
                  {
                    type: 'linear',
                    ticks: {
                      userCallback: function (tick) {
                        return tick.toString() + 'dB';
                      },
                    },
                    scaleLabel: {
                      labelString: 'Voltage',
                      display: true,
                    },
                  },
                ],
              },
            },
          };

          new mdb.Chart(document.getElementById('scatter-chart'), dataScatter, optionsScatter);

带有自定义选项的条形图

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

HTML


        <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 -每个图表具有组件提供的默认设置，因此此参数是可选的。

HTML
JavaScript


        <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，并且您拥有自行添加到项目中。

HTML
JavaScript


        <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()`

JavaScript


        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.

JavaScript


        const eventOption ={
            options: {
            // This chart will not respond to mousemove, etc
            events: ['click']
            }
        };

进口

MDB UI KIT 也可与模块捆绑器一起使用。使用以下代码导入此组件：

JavaScript


        import { Chart } from 'mdb-ui-kit';