繁体   English   中英

使用 Numeral.js 以 % 为单位舍入 JSON 数字

[英]Using Numeral.js to round JSON numbers in %

我正在从 API 获取 json 数据,我必须将一些数字显示为 %。 json 数据将它们显示为 0.00。 我试过这个方法,但没有奏效。 我想使用一个 url 来获取我的数据,然后使用 Numeral.js 来制作我得到的过滤数据。 我究竟做错了什么? 我为我的图表创建了一个模板。 然后我发出一个获取请求来获取我的数据并过滤它,所以我得到了我需要的值。 然后我取那个值并尝试格式化它。 我想放在图表上的新值。

 const data = { labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], datasets: [ { label: "ADOPTION", data: [18, 12, 6, 9, 12, 3, 9], backgroundColor: "rgba(73, 117, 197, 1)", borderColor: "rgba(73, 117, 197, 1)" }, { label: "Target", data: [0.654, 0.654, 0.751], backgroundColor: "rgba(236, 123, 46, 1)", borderColor: "rgba(236, 123, 46, 1)" } ] }; // config for graph const config = { type: "line", data: data, options: { plugins: { title: { display: true, text: 'data' }, }, scales: { y: { beginAtZero: true } } } }; // render init block const myChart = new Chart( document.getElementById("data"), config ); // Fethc block for the graph async function fetchJSON() { const url="link"; const response = await fetch(url); //* loads waiting to complete the request const datapoints = await response.json(); return datapoints; } fetchJSON().then((datapoints) => { const month = datapoints.map(function (index) { return index.PERIOD_NAME; //*reffers to jSon word from file }); console.log(month); myChart.config.data.labels = month; myChart.update(); }); fetchJSON().then((datapoints) => { const total = datapoints.map(function (index) { return index.ADOPTION //*reffers to jSon word from file }); var string = numeral(datapoints).format('0.000%'); console.log(string); myChart.config.data.datasets[0].data = total; myChart.update(); });
 <div class="col-sm-12 col-md-4 col-lg-4"> <canvas id="data"></canvas> </div> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js"></script>

我猜datapoints是一个数组。 Numeral 接受尝试将其转换为数字的数字或字符串。 您可以使用datapoints.map(val => numeral(val).format('0.00%'))来格式化数据点元素。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM