提问人：Sergio241 提问时间：11/14/2023 最后编辑：Krzysztof KrzeszewskiSergio241 更新时间：11/16/2023 访问量：71
如何在 DataTable 中使用千 （，） 格式化值，我正在使用 JavaScript highcharts.com 库？
How can I format a value with thousands (,) in the DataTable, I am using the JavaScript highcharts.com library?
问：
我正在尝试用千或（，）格式化我的dataTable。但是我没能做到，我看过论坛，我没能做到，我会和你分享我的代码。变量 Venta 是 theq 我想在图表和 dataTable 中格式化 data： sale。
<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/exporting.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script>
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Ventas Mensuales',
align: 'left',
style: {
fontSize: '16px'
}
},
xAxis: {
categories: mes, // What returns mes is ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre','Octubre', 'Noviembre', 'Diciembre'];
crosshair: true,
accessibility: {
description: 'Meses'
}
},
yAxis: {
min: 0,
title: {
text: 'Ventas Mensuales'
}
},
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 // What returns is ['1356940858.000000', '1945419126.000000', '934706589.000000', '1803607453.000000', '78415027.000000']
// data: valoresY
}],
data: {
table: 'datatable'
},
exporting: {
tableCaption: "Tabla de Ventas Mensualesss"
}
});
</script>```
Esperaba el valor del dataTable export formateado en miles
答：
0赞
Krzysztof Krzeszewski
11/14/2023
#1
如果希望图表值具有千位分隔符，可以通过设置全局选项来设置它们：
Highcharts.setOptions({
lang: {thousandsSep: ','}
});
如果要设置标签的格式，可以在值之后传递自定义格式，因此在您的情况下：
yAxis: {
labels: {
format: '{value:,.0f}'
}
}
举个例子：
Highcharts.setOptions({
lang: {
thousandsSep: ','
}
});
Highcharts.chart('container', {
chart: {
type: 'column'
},
yAxis: {
labels: {
format: '{value:,.0f}'
}
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
},
series: [{
data: [1000000, 2000000, 3000000, 4000000, 5000000]
}]
});<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/exporting.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>评论
0赞
Sergio241
11/15/2023
1.非常感谢，它帮助我用数千个分隔符格式化图表，这部分已经对我有用了。2. 现在我想格式化实现 Higchart 库的 dataTable，特别是这部分，它在图形菜单中向我显示一个 dataTable（查看数据表）。[在此输入图片描述][1] [在此处输入图像描述][2] [1]：i.stack.imgur.com/UQ5Uy.png [2]：i.stack.imgur.com/x8uEB.png<script src="https://code.highcharts.com/modules/export-data.js"></script>
0赞
Krzysztof Krzeszewski
11/15/2023
每个问题都应集中在一个问题上
0赞
Sergio241
11/15/2023
这就是我从一开始就想要的，我不知道我是否清楚。
0赞
Halvor Holsten Strand
11/15/2023
#2
您可以扩展该模块以对数据表中显示的值进行格式设置，例如，如下所示（请参阅 JSFiddle 演示）：export-data
(function(H) {
const Chart = H.Chart;
H.wrap(Chart.prototype, 'getDataRows', function(proceed, multiLevelHeaders) {
const result = proceed.apply(this, Array.prototype.slice.call(arguments, 1));
for (const x of result) {
console.log(x, x.length)
for (let i = 1; i < x.length; i++) {
if (typeof x[i] === 'number') {
x[i] = "$" + H.numberFormat(x[i], 0)
}
}
}
return result;
});
}(Highcharts));
Highcharts.chart('container', {
series: [{
data: [100000, 200000, 300000, 400000, 500000, 600000, 700000, 800000, 900000, 1000000]
}],
});
这里需要注意的是，它中断了按该列排序，因为它不再比较数字，而是比较字符串。简单的方法是禁用排序 （API）。一个复杂的变化是仅禁用按系列值排序，这是另一个扩展，例如如下所示（包含在上面的 JSFiddle 中）：allowTableSorting
(function(H) {
H.addEvent(Chart, 'afterViewData', function() {
const div = this.dataTableDiv
const row = div.querySelector('thead tr');
if (row) {
for (let x = 1; x < row.childNodes.length; x++) {
const th = row.childNodes[x]
const table = th.closest('table');
th.addEventListener('click', function(e) {
e.stopImmediatePropagation();
});
}
}
}, {
order: -1
});
}(Highcharts));
评论