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

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

下面是graph的脚本：

 <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();



 });

$（文档）.ready（函数（）{
//自定义datalabelBar
变量选项={
图表：{
身高：350，
类型：'bar'，
工具栏：{
秀：真的
}
},
打印选项：{
酒吧：{
水平：错，
数据标签：{
位置：'顶部'，
},
}
},
数据标签：{
启用：对，
位置：'顶部'，
格式化程序：函数（val）{
返回val；
},
对,，
抵销额：0，
风格：{
fontSize:'10px'，
颜色：['#000']
}
},
笔划：{
秀:假,，
宽度：1，
颜色：['#fff']，
线头：“圆形”，
曲线：“平滑”，
},
系列：[{
名称：'包装'，
数据：
}, {
名称：'调度'，
数据：
},
{
姓名：'还押'，
数据：
}],
xaxis：{
类别：，
},
}
var图表=新的ApexCharts(
文档查询选择器（“每周调度图”），
选择权
);
chart.render（）；
});

以下是图表的屏幕截图：

 <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();



 });

---

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

这是可能的！您的问题是关于数据标签的。ApexCharts为我们提供了一个通用的dataLabels选项和一个依赖于图表类型的dataLabels选项。分别有

options.dataLabels

和

options.plotOptions.bar.dataLabels

在第一个选项中，您可以使用

offsetY

，在第二个选项中，您可以配置此标签

方向

及其

位置

试着玩这个价值观，祝你好运：）

var选项={
图表：{
类型：'bar'
},
系列：[{
名称：'包装'，
数据：[300000、300000、500000、800000]
}, {
名称：'调度'，
数据：[46577296948153120,0]
},
{
姓名：'还押'，
数据：[2529622335143800000]
}
],
xaxis：{
类别：[“第1周”、“第2周”、“第3周”、“第4周”]，
},
打印选项：{
酒吧：{
数据标签：{
方向：'垂直'，
位置：“中心”//底部/中心/顶部
}
}
},
数据标签：{
风格：{
颜色：['#000000']
},
offsetY:15，//使用此值
},
}
var图表=新的ApexCharts（document.querySelector（“图表”），选项）；
chart.render（）