如何利用csv数据在Chart.js中制作不同颜色的条形图？
如何利用csv数据在Chart.js中制作不同颜色的条形图？
提问于 2019-06-24 22: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-24 23: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
复制
相似问题
离子问题没有“访问-控制-允许-来源”
离子-访问-控制-允许-来源
离子无“访问-控制-允许-来源”
离子怪异的“访问-控制-允许-来源”问题
访问-控制-允许- Magento 2和离子的来源
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
