[英]parsing data on chartJS Horizontal
const labels = ['s', 'a', 'd']
const data = {
labels: labels,
datasets: [{
label: 'Weekly Sales',
data: [
{products: { sales: [0, 5], id: 1 } },
{products: { sales: [5, 10], id: 2 } },
{products: { sales: [10, 15], id: 3 } },
],
backgroundColor: [
'rgba(255, 26, 104, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
],
borderColor: [
'rgba(255, 26, 104, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
],
borderWidth: 1
}]
};
// config
const config = {
type: 'bar',
data,
options: {
parsing: {
yAxisKey: 'products.sales',
},
indexAxis: 'y',
scales: {
y: {
beginAtZero: true
}
}
}
};
我正在嘗試使用 Chartjs 創建一個水平條形圖我在將數據放入圖表時遇到了麻煩。 在此處輸入圖像描述output 應該像圖像中的這個。
而不是定義parsing.yAxisKey
,您可以 map 原始數據如下:
data: rawData.map(o => o.products.sales),
請在下面查看您修改后的可運行代碼,看看它是如何工作的。
const labels = ['s', 'a', 'd']; const rawData = [ {products: { sales: [0, 5], id: 1 } }, {products: { sales: [5, 10], id: 2 } }, {products: { sales: [10, 15], id: 3 } }, ]; const data = { labels: labels, datasets: [{ label: 'Weekly Sales', data: rawData.map(o => o.products.sales), backgroundColor: [ 'rgba(255, 26, 104, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', ], borderColor: [ 'rgba(255, 26, 104, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', ], borderWidth: 1 }] }; // config const config = { type: 'bar', data, options: { indexAxis: 'y', scales: { y: { beginAtZero: true } } } }; new Chart('myChart', config);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script> <canvas id="myChart" height="80"></canvas>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.