Apexchart做統(tǒng)計(jì)界面發(fā)現(xiàn)一個(gè)問題，數(shù)據(jù)全是整數(shù)，但是還顯示小數(shù)點(diǎn)，如下圖：
?網(wǎng)上很少有答案，自己研究了很久，分享下經(jīng)驗(yàn)
第一種方案重新buildDefaultScript方法
??
protected function buildDefaultScript()
{
$options = JavaScript::format($this->options);
return <<<JS
(function () {
var options = {$options};
// 如果是小數(shù)的話，Y軸會(huì)被強(qiáng)制設(shè)置成2位小數(shù)， 這里改寫Y軸的小數(shù)設(shè)置，
// 注意options.yaxis.labels = { formatter: (value) => { return value }} 這種寫法也是不生效
options.yaxis =
{
labels: {
formatter: (value) => { return value },
}
};
var chart = new ApexCharts(
$("{$this->containerSelector}")[0],
options
);
chart.render();
})();
JS;
第2種方案：
在圖表配置加入可執(zhí)行的 JS 代碼
$this->option(
'yaxis.labels.formatter',
JavaScript::make("(value) => { return value }") // 這個(gè)值最后段代碼會(huì)作為JS代碼執(zhí)行
);可以自己封裝一個(gè)方法繼承Chat 然后在調(diào)用
/**
* 設(shè)置Y軸數(shù)據(jù)欄顯示顯示
* 如果是小數(shù)的話，Y軸會(huì)被強(qiáng)制設(shè)置成2位小數(shù)， 這里改寫Y軸的小數(shù)設(shè)置
* @return void
*/
public function yaxisLabelsFormatter() {
$this->option(
'yaxis.labels.formatter',
JavaScript::make("(value) => { return value }") // 這個(gè)值最后段代碼會(huì)作為JS代碼執(zhí)行
);
}改寫后效果如下：
PS： 推薦使用第2種方案。配置靈活
圖形模擬文章來源：http://www.zghlxwxcb.cn/news/detail-459350.html
https://codepen.io/apexcharts/pen/GQmoXPhttps://codepen.io/apexcharts/pen/GQmoXPOptions配置參考文章來源地址http://www.zghlxwxcb.cn/news/detail-459350.html
annotations – ApexCharts.js
到了這里，關(guān)于laravel 圖表Apexchart 整數(shù)多出小數(shù)點(diǎn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
