如何在顶点条形图中垂直显示条形上的值

Question

我正在使用顶点条形图，我想在条形图上垂直显示值，但它水平显示。 我搜索了很多以垂直显示价值，但没有找到任何解决方案。请帮我解决这个问题。我也分享代码。

这是图表的脚本：

 <script type="text/javascript">


$(document).ready(function() {
// custom datalabelBar
     var options = {
    chart: {
        height: 350,
        type: 'bar',
        toolbar: {
            show: true
        }
    },
    plotOptions: {
        bar: {
            horizontal: false,
            dataLabels: {
                position: 'top',
            },
        }
    },
    dataLabels: {
        enabled: true,
        position: 'top',
        formatter: function (val) {
        return val ;
      },
        horizontal: true,
        offsetX: 0,
        style: {
            fontSize: '10px',
            colors: ['#000']
        }
    },
    stroke: {
        show: false,
        width: 1,
        colors: ['#fff'],
        lineCap: 'round',
        curve: 'smooth',
    },
    series: [{
        name: 'Packing',
        data: <?php echo json_encode($wd_packing) ?> 
    }, {
        name: 'Dispatch',
        data: <?php echo json_encode($wd_dispatch) ?>
    },
    {
        name: 'Remaning',
        data: <?php echo json_encode($wd_reaming) ?> 
    }],
    xaxis: {
        categories: <?php echo json_encode($wd_week) ?>,
    },
}
var chart = new ApexCharts(
    document.querySelector("#weekly_dispatch_graph"),
    options
);
chart.render();



 });

这是图表的截图：

请帮我解决这个问题。提前致谢。

Answer 1

有可能！您的问题是关于 dataLabels。 ApexCharts 为我们提供了一个常见的 dataLabels 选项和一个取决于图表类型的 dataLabels 选项。分别有options.dataLabels 和options.plotOptions.bar.dataLabels。

在第一个中，您可以使用offsetY，在第二个中，您可以配置此标签orientation 及其position。

尝试使用这个值，祝你好运:)

var options = {
  chart: {
    type: 'bar'
  },
  series: [{
      name: 'Packing',
      data: [300000, 300000, 500000, 800000]
    }, {
      name: 'Dispatch',
      data: [46577, 296948, 153120, 0]
    },
    {
      name: 'Remaning',
      data: [252962, 2382, 235143, 800000]
    }
  ],
  xaxis: {
    categories: ['Week 1', 'Week 2', 'Week 3', 'Week 4'],
  },
  plotOptions: {
    bar: {
      dataLabels: {
        orientation: 'vertical',
        position: 'center' // bottom/center/top
      }
    }
  },
  dataLabels: {
    style: {
      colors: ['#000000']
    },
    offsetY: 15, // play with this value
  },
}

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

chart.render();

<div id="chart"></div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@3.18.1/dist/apexcharts.min.js"></script>

Answer 2

dataLabels: {
    position: 'top',
    enabled: true,
    textAnchor: 'start',
    style: {
        fontSize: '10pt',
        colors: ['#000']
    },
    offsetX: 0,
    horizontal: true,
    dropShadow: {
        enabled: false
    }
},

注意offsetX: 0 和horizontal: true。