使用ApexCharts库放置柱形图的问题

时间:2019-04-05 09:10:57

标签: javascript charts dispose column-chart apexcharts

我正在为社会使用apexChart(这是我隐藏财产名称的原因)。

我在工作一个柱状图,其中包含13个不同系列,每个系列中有4个数据(对于某人为空),这些值在“ xaxis”的4类中报告。

我的问题是关于他们类别的配置的转变,您可以在图片上看到我有几列已移至正确的配置->比较它们是初始位置。

PICTURE isn't good disposition column-chart whith library apexCharts 在下面可以看到我的脚本:

var options = {
            chart: {
                height: 450,
                type: 'bar',
            },
            plotOptions: {
                bar: {
                    horizontal: false,
                    columnWidth: '100%',
                    endingShape: 'flat'

            },},
            dataLabels: {
                enabled: false
            },
            stroke: {
                show: true,
                width: 2,
                colors: ['transparent']
            },

            series: [{
                name: 'Confidential',
                data: [ 22, 5, 9, ]
                      },{
                name: 'Confidential',
                data: [17, , , ]
                      },{
                name: 'Confidential',
                data: [4, 2, , ]
                      },{
                name: 'Confidential',
                data: [ 1, , , ]
                      },{
                name: 'Confidential',
                data: [ 5, 1, , ]
                      },{
                name: 'Confidential',
                data: [ 3, , , ]
                      },{
                name: 'Confidential',
                data: [ 2, , , ]
                      },{
                name: 'plooppPPPloooPPp',
                data: [ 22, 5, 9, ]
                      },{
                name: 'Confidential',
                data: [ 3, , , ]
                      },{
                name: 'Confidential',
                data: [ , 2, , ]
                      },{
                name: 'Confidential',
                data: [ 1, , , ]
                      },{
                name: 'Confidential',
                data: [ 1, , , ]
                      },{
                name: 'Confidential',
                data: [ 1, , , ]
                        }
                    ],
            xaxis: {
                categories: ['Confidential', 'Confidential', 'whuuuutttt', 'lolilollll'],
            },
            fill: {
                opacity: 1

            },
            tooltip: {
                y: {
                    formatter: function (val) {
                        return  val
                    }
                }
            }
        }

        var chart = new ApexCharts(
            document.querySelector("#chart"),
            options
        );

        chart.render();
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

<div id="chart" style="max-width: 850px;
  margin:0px;">
    <script src="js/Graph2.js"></script>
</div>

我已经阅读了文档并搜索了一个已解决的问题,但没有任何事情做得很好。

如果您对此有所帮助,您会很感激。

祝您周末愉快:)

0 个答案:

没有答案