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

Question

我想在这个顶点图表中选择“堆栈”或“组”。通过选择任何选项，同一图表应相应更改。

标签： graphfrontendapexcharts

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