英文:
How to change bar-color on a chart.js bar graph
问题
我有一个使用chart.js的条形图。我想要能够更改条形图的颜色（值部分）。
我尝试查阅chart.js文档，但未找到相关信息。
<main>
<div class="content">
<h1>Results</h1>
<h2>Trial 1</h2>
<div class="results" class="results" id="trial-1"> <canvas class="show-results"></canvas></div>
<h2>Trial 2</h2>
<div class="results" id="trial-1"> <canvas class="show-results"></canvas></div>
<h2>Trial 3</h2>
<div class="results" id="trial-1"> <canvas class="show-results"></canvas></div>
<h2>Trial 4</h2>
<div class="results" id="trial-1"> <canvas class="show-results"></canvas></div>
<h2>Trial 5</h2>
<div class="results" id="trial-1"> <canvas class="show-results"></canvas></div>
<h2>Results Overall</h2>
<div class="results" id="trial-1"> <canvas class="show-results"></canvas></div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementsByClassName("show-results");
for (let i = 0; i < ctx.length; i++) {
new Chart(ctx[i], {
type: 'bar',
data: {
labels: ['Lua', 'Python', 'JavaScript', 'Java', 'C', 'C++', 'F#', 'Haskell', 'C#', 'Rust', 'Go'],
datasets: [{
label: 'Time to compile and run',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
}
</script>
英文:
I have a bar chart using chart.js. I want to be able to change the color of the bar-chart (the value part).
I've tried looking on the chart.js docs but I couldn't find anything.
<main>
<div class="content">
<h1>Results</h1>
<h2>Trial 1</h2>
<div class="results" class="results" id="trial-1"> <canvas class="show-results"></canvas></div>
<h2>Trial 2</h2>
<div class="results" id="trial-1"> <canvas class="show-results"></canvas></div>
<h2>Trial 3</h2>
<div class="results" id="trial-1"> <canvas class="show-results"></canvas></div>
<h2>Trial 4</h2>
<div class="results" id="trial-1"> <canvas class="show-results"></canvas></div>
<h2>Trial 5</h2>
<div class="results" id="trial-1"> <canvas class="show-results"></canvas></div>
<h2>Results Overall</h2>
<div class="results" id="trial-1"> <canvas class="show-results"></canvas></div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementsByClassName("show-results");
for (let i = 0; i < ctx.length; i++) {
new Chart(ctx[i], {
type: 'bar',
data: {
labels: ['Lua', 'Python', 'JavaScript', 'Java', 'C', 'C++', 'F#', 'Haskell', 'C#', 'Rust', 'Go'],
datasets: [{
label: 'Time to compile and run',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
}
</script>
答案1
得分: 0
仅翻译代码部分如下：
backgroundColor: [
'rgba(239, 197, 45, 1)'
]
请注意，上述代码是 JavaScript 中的一部分，用于设置图表的背景颜色。
英文:
Simpy add
'rgba(239, 197, 45, 1)'
]
To the datasets array in your code.
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementsByClassName("show-results");
for (let i = 0; i < ctx.length; i++) {
new Chart(ctx[i], {
type: 'bar',
data: {
labels: ['Lua', 'Python', 'JavaScript', 'Java', 'C', 'C++', 'F#', 'Haskell', 'C#', 'Rust', 'Go'],
datasets: [{
label: 'Time to compile and run',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1,
backgroundColor: [
'rgba(239, 197, 45, 1)'
]
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
}
</script>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论