在前端可以选择将图形从堆叠更改为分组，反之亦然

Question

我希望在此顶点图表中有选择 'Stack' 或 'Group' 的选项。通过选择任何一个选项，相同的图表应该相应地改变。

Answer 1

您必须在工具栏的工具字典中定义 2 个名为 Stacked 和 Grouped 的图标。单击 stacked 将更新选项并将 stacked 设置为 True，而单击 grouped 将更新选项并将 stacked 设置为 False。

检查下面的代码：

options = {

    toolbar{
        tools:{
              show: true,
              download: false,
              selection: true,
              customIcons: [{
                index: 1,
                title: 'Grouped',
                class: 'custom-icon',
                icon: '<p width="50">Grouped</p>',
                click: function (chart, options, e) {
                  chart.updateOptions({ 

                    chart:{
                      stacked: false

                    },

                  },)
                  },
              },
              {
                index: 0,
                title: 'Stacked',
                class: 'custom-icon',
                icon: '<p width="50">Stacked</p>',

                click: function (chart, options, e) {
                  chart.updateOptions({ 

                    chart:{
                      stacked: true

                    },
                  },)
              },
          }],
       },
    },
}

这里 apexcharts.css 也有一点 css 变化：

.apexcharts-toolbar {
  width: 150px;
}

自定义 css 此处的最后一项更改：

div.apexcharts-toolbar-custom-icon{
    width: 60px;
    color: white;
}

输出：https://imgur.com/qsFmdZP

在前端可以选择将图形从堆叠更改为分组，反之亦然

have option in frontend to change graph from stacked to grouped and vice versa in apexcharts

frontend

graph

apexcharts