如何利用csv数据在Chart.js中制作不同颜色的条形图？
如何利用csv数据在Chart.js中制作不同颜色的条形图？
提问于 2019-06-25 06:34:11
因此，我试图在条形图上绘制导入的csv数据。我想使图上的每个条形图与顶部的相关标签形成不同的颜色匹配。但是当我试图为每个条形分配特定的颜色时，它只会改变每个部分的第一个条形。
下面是我的图形代码：
var ctx3 = document.getElementById("chart3");
var chart3 = new Chart(ctx3, {
type: 'bar',
plugins: [ChartDataSource],
data: {
datasets: [{
backgroundColor: [
'rgb(19, 82, 150)',
'rgb(196, 230, 255)',
'rgb(153, 207, 247)',
'rgb(103, 172, 224)',
'rgb(19, 82, 150)',
'rgb(196, 230, 255)',
],
borderColor: [
'transparent',
'transparent',
'transparent',
'transparent',
'transparent',
'transparent'
]
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
layout: {
padding: {
left: 50,
right: 50,
top: 50,
bottom: 50
}
},
plugins: {
datasource: {
url: 'builddata.csv'
}
}
}
});回答 1
Stack Overflow用户
回答已采纳
发布于 2019-06-25 07:01:37
dataset中的数据需要是每个具有属性的对象数组，请考虑以下内容：
var ctx1 = document.getElementById('chart1').getContext('2d');
var chart1 = new Chart(ctx1, {
type: 'bar',
plugins: [ChartDataSource],
options: {
plugins: {
datasource: {
url: 'https://nagix.github.io/chartjs-plugin-datasource/samples/sample-dataset.xlsx'
}
}
},
data: {
datasets: [{
backgroundColor: 'rgb(19, 82, 150)',
borderColor: 'transparent'
},
{
backgroundColor: 'rgb(196, 230, 255)',
borderColor: 'transparent'
}
]
}
});<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script src="https://cdn.jsdelivr.net/npm/xlsx@0.14.3/dist/xlsx.full.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datasource@0.1.0"></script>
<canvas id="chart1" style="display: block; width: 580px; height: 290px;" width="580" height="290"></canvas>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56748090
复制相关文章
相似问题
腾讯云开发者
