格式化 highcharts.com 库的数据表-解网

问：

我在 Laravel 工作，我正在用 highcharts.com 库制作图表，我已经在用数千个值格式化图表，但是这个库也有一个数据表，但是这个表没有用千值格式化，下面我分享我的代码

<div class="">
    <figure class="highcharts-figure">
        <div id="container"></div>
    </figure>
</div>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script>
        var anio = {!! json_encode($anio) !!};
        var mes = {!! json_encode($mes) !!}; ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'];
        var venta = {!! json_encode($venta) !!}; ['1356940858.000000', '1945419126.000000', '934706589.000000', '1803607453.000000', '78415027.000000']


        venta = venta.map(function(value) {
            return parseFloat(value);
        });

        Highcharts.setOptions({
            lang: {
                thousandsSep: ','
            }
        });

        Highcharts.chart('container', {
            chart: {
                type: 'column'
            },
            title: {
                text: 'Ventas Mensuales',
                align: 'left',
                style: {
                    fontSize: '16px'
                }
            },
            xAxis: {
                categories: mes, // Uses the JavaScript array "mes" for month names
                crosshair: true,
                accessibility: {
                    description: 'Meses'
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Ventas Mensuales'
                },
                labels: {
                    format: '{value:,.0f}'
                }
            },
            tooltip: {
                valueSuffix: ' (COP)'
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true,
                        formatter: function() {
                            return '$' + Highcharts.numberFormat(this.y, 0);
                        }
                    }
                }
            },
            series: [{
                name: 'Ventas',
                data: venta
                // data: valoresY
            }],
            data: {
                table: 'datatable'
            },
            exporting: {
                tableCaption: "Tabla de Ventas Mensuales"
            }

        });


    </script>

只是这个链接是生成数据表的链接，接下来我分享它的外观图像<script src="https://code.highcharts.com/modules/export-data.js"></script>

成像 1

成像 2

销售值是我想在数据表中以千为单位显示的值

JavaScript Laravel HighCharts 数据表

let H = Highcharts;

H.addEvent(H.Chart, 'aftergetTableAST', function(e) {
  e.tree.children[2].children.forEach(function(row) {
    row.children.forEach(function(cell, i) {
      if (i !== 0) {
        let num = parseFloat(cell.textContent.replace(',', ''));
        if (!isNaN(num)) {
          cell.textContent = num.toLocaleString();
        }
      }
    });
  });
});

演示：https://jsfiddle.net/BlackLabel/yoqzvfp9/

上一个：反序列化 JSON 并使用主记录重新添加到 DataTable 中

下一个：修复垂直标题中的第一行和第一列 JQuery DataTable

格式化 highcharts.com 库的数据表

Format the data table of the highcharts.com library

评论