图表高级用法 MDB Pro component

图表高级用法-Bootstrap 5和Material Design 2.0

本文档提供了高级图表用法的示例。

注意:请阅读 API 基本图表文档中的标签 查找所有可用选项和高级自定义


选件

在大多数情况下,使用高级图表与选项的处理有关。

MDB为每个图表提供默认选项-您可以通过传递一个对象轻松更改它 与您的图表构造函数的自定义选项。


          <canvas id="chart-options-example"></canvas>
        
 
          // Data
          const dataChartOptionsExample = {
            type: 'bar',
            data: {
              labels: ['January', 'February', 'March', 'April', 'May', 'June'],
              datasets: [
                {
                  label: 'Traffic',
                  data: [30, 15, 62, 65, 61, 6],
                  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
          const optionsChartOptionsExample = {
            options: {
              scales: {
                xAxes: [
                  {
                    ticks: {
                      fontColor: '#4285F4',
                    },
                  },
                ],
                yAxes: [
                  {
                    ticks: {
                      fontColor: '#f44242',
                    },
                  },
                ],
              },
            },
          };
    
          new mdb.Chart(
            document.getElementById('chart-options-example'),
            dataChartOptionsExample,
            optionsChartOptionsExample
          );
        

混合的

使用MDB,可以创建两个或多个不同组合的混合图表 图表类型。一个常见的示例是条形图,其中也包含折线数据集。


          <canvas id="chart-mixed-example"></canvas>
        
 
          // Data
          const dataMixedChartExample = {
            type: 'bar',
            data: {
              labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday '],
              datasets: [
                // First dataset (bar)
                {
                  label: 'Impressions',
                  data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
                  order: 2,
                },
                // Second dataset (line)
                {
                  label: 'Impressions (absolute top) %',
                  data: [211, 2543, 2745, 3123, 2765, 1485, 587],
                  type: 'line',
                  order: 1,
                  backgroundColor: 'rgba(66, 133, 244, 0.0)',
                  borderColor: '#94DFD7',
                  borderWidth: 2,
                  pointBorderColor: '#94DFD7',
                  pointBackgroundColor: '#94DFD7',
                  lineTension: 0.0,
                },
              ],
            },
          };
    
          new mdb.Chart(document.getElementById('chart-mixed-example'), dataMixedChartExample);
        

数据标签

dataLabelsPlugin 选项设置为 true 以直接显示值 在图上。


          <canvas id="chart-data-labels-example"></canvas>
        

          // Data
          const dataChartDataLabelsExample = {
            type: 'pie',
            data: {
              labels: ['January', 'February', 'March', 'April', 'May'],
              datasets: [
                {
                  label: 'Traffic',
                  data: [30, 45, 62, 65, 61],
                  backgroundColor: [
                    'rgba(63, 81, 181, 0.5)',
                    'rgba(77, 182, 172, 0.5)',
                    'rgba(66, 133, 244, 0.5)',
                    'rgba(156, 39, 176, 0.5)',
                    'rgba(233, 30, 99, 0.5)',
                  ],
                },
              ],
            },
          };
    
          // Options
          const optionsChartDataLabelsExample = {
            dataLabelsPlugin: true,
            options: {
              plugins: {
                datalabels: {
                  formatter: (value, ctx) => {
                    let sum = 0;
                    // Assign the data to the variable and format it according to your needs
                    let dataArr = dataChartDataLabelsExample.data.datasets[0].data;
                    dataArr.map((data) => {
                      sum += data;
                    });
                    let percentage = ((value * 100) / sum).toFixed(2) + '%';
                    return percentage;
                  },
                  color: 'white',
                  labels: {
                    title: {
                      font: {
                        size: '14',
                      },
                    },
                  },
                },
              },
            },
          };
    
          new mdb.Chart(
            document.getElementById('chart-data-labels-example'),
            dataChartDataLabelsExample,
            optionsChartDataLabelsExample
          );  
        

双Y轴

在下面的示例中,我们创建了带有双Y轴的图表,其中包含2个数据集,每个数据集 完全不同的数据范围。

这种结构需要调整比例,因此将左轴分配并调整为 第一个数据集,右轴指向第二个数据集。


          <canvas id="chart-double-y-axis-example"></canvas>
        

          // Data
          const dataChartDobuleYAxisExample = {
            type: 'bar',
            data: {
              labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday '],
              datasets: [
                {
                  label: 'Impressions',
                  yAxisID: 'y-axis-1',
                  data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
                  order: 2,
                },
                {
                  label: 'Impressions (absolute top) %',
                  yAxisID: 'y-axis-2',
                  data: [1.5, 2, 0.5, 3, 1.2, 4, 3.4],
                  type: 'line',
                  order: 1,
                  backgroundColor: 'rgba(66, 133, 244, 0.0)',
                  borderColor: '#94DFD7',
                  borderWidth: 2,
                  pointBorderColor: '#94DFD7',
                  pointBackgroundColor: '#94DFD7',
                  lineTension: 0.0,
                },
              ],
            },
          };
    
          // Options
          const optionsChartDobuleYAxisExample = {
            options: {
              scales: {
                yAxes: [
                  {
                    display: true,
                    position: 'left',
                    id: 'y-axis-1',
                  },
                  {
                    display: true,
                    position: 'right',
                    id: 'y-axis-2',
                    gridLines: {
                      drawOnChartArea: false,
                    },
                    ticks: {
                      beginAtZero: true,
                    },
                  },
                ],
              },
            },
          };
    
          new mdb.Chart(
            document.getElementById('chart-double-y-axis-example'),
            dataChartDobuleYAxisExample,
            optionsChartDobuleYAxisExample
          );
        

漏斗

具有自定义选项和标签格式的水平条形图示例(计算 将数字整数转换为百分比)。

这种数据可视化通常用于可视化网站流量。


          <canvas id="chart-funnel-example"></canvas>
        

          // Data
          const dataChartFunnelExample = {
            type: 'horizontalBar',
            data: {
              labels: ['Product views', 'Checkout', 'Purchases'],
              datasets: [
                {
                  data: [2112, 343, 45],
                  barPercentage: 1.24,
                },
              ],
            },
          };
    
          // Options
          const optionsChartFunnelExample = {
            dataLabelsPlugin: true,
            options: {
              scales: {
                xAxes: [
                  {
                    gridLines: {
                      offsetGridLines: true,
                    },
                  },
                ],
              },
              legend: {
                display: false,
              },
              plugins: {
                datalabels: {
                  formatter: (value, ctx) => {
                    let sum = 0;
                    let dataArr = dataChartFunnelExample.data.datasets[0].data;
                    dataArr.map((data) => {
                      sum += data;
                    });
                    let percentage = ((value * 100) / sum).toFixed(2) + '%';
                    return percentage;
                  },
                  color: '#4f4f4f',
                  labels: {
                    title: {
                      font: {
                        size: '13',
                      },
                      anchor: 'end',
                      align: 'right',
                    },
                  },
                },
              },
            },
          };
    
          new mdb.Chart(
            document.getElementById('chart-funnel-example'),
            dataChartFunnelExample,
            optionsChartFunnelExample
          );
        

在Y轴上格式化值

在下面的示例中,我们仅在Y轴上的每个值之前添加“ $”。


          <canvas id="chart-values-formatting-example"></canvas>
        

          // Data
          const dataChartValuesFormattingExample = {
            type: 'bar',
            data: {
              labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday '],
              datasets: [
                {
                  label: 'Sales',
                  data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
                },
              ],
            },
          };
    
          // Options
          const optionsChartValuesFormattingExample = {
            options: {
              scales: {
                yAxes: [
                  {
                    ticks: {
                      callback: function (value, index, values) {
                        return '$' + value;
                      },
                    },
                  },
                ],
              },
            },
          };
    
          new mdb.Chart(
            document.getElementById('chart-values-formatting-example'),
            dataChartValuesFormattingExample,
            optionsChartValuesFormattingExample
          );
        

格式化工具提示中的值

在下面的示例中,我们仅在工具提示中显示的每个值之前添加“ $”。

将鼠标悬停在图表的直线上可以查看工具提示。


          <canvas id="chart-tooltips-formatting-example"></canvas>
        

          // Data
          const dataChartTooltipsFormattingExample = {
            type: 'line',
            data: {
              labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday '],
              datasets: [
                {
                  label: 'Sales',
                  data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
                },
              ],
            },
          };
    
          // Options
          const optionsChartTooltipsFormattingExample = {
            options: {
              tooltips: {
                callbacks: {
                  label: function (tooltipItem, data) {
                    return '$ ' + tooltipItem.yLabel;
                  },
                },
              },
            },
          };
    
          new mdb.Chart(
            document.getElementById('chart-tooltips-formatting-example'),
            dataChartTooltipsFormattingExample,
            optionsChartTooltipsFormattingExample
          );
        

条形图中的双数据集

条形图中的双重数据集示例。


          <canvas id="chart-bar-double-datasets-example"></canvas>
        

          // Data
          const dataChartBarDoubleDatasetsExample = {
            type: 'bar',
            data: {
              labels: ['Desktop', 'Mobile', 'Tablet'],
    
              datasets: [
                {
                  label: 'Users',
                  data: [510, 653, 255],
                },
                {
                  label: 'Page views',
                  data: [1251, 1553, 1355],
                  backgroundColor: '#94DFD7',
                  borderColor: '#94DFD7',
                },
              ],
            },
          };
    
          // Options
          const optionsChartBarDoubleDatasetsExample = {
            options: {
              scales: {
                yAxes: [
                  {
                    stacked: false,
                    ticks: {
                      beginAtZero: true,
                    },
                  },
                ],
                xAxes: [
                  {
                    stacked: false,
                  },
                ],
              },
            },
          };
    
          new mdb.Chart(
            document.getElementById('chart-bar-double-datasets-example'),
            dataChartBarDoubleDatasetsExample,
            optionsChartBarDoubleDatasetsExample
          );