如何在 chart.js 条形图上更改条形颜色

huangapple
go评论98阅读模式
英文:

How to change bar-color on a chart.js bar graph

问题

我有一个使用chart.js的条形图。我想要能够更改条形图的颜色（值部分）。

我尝试查阅chart.js文档，但未找到相关信息。

  1. <main>
  2.     <div class="content">
  3.         <h1>Results</h1>
  4.         <h2>Trial 1</h2>
  5.         <div class="results" class="results" id="trial-1"> <canvas class="show-results"></canvas></div>
  6.         <h2>Trial 2</h2>
  7.         <div class="results" id="trial-1"> <canvas class="show-results"></canvas></div>
  8.         <h2>Trial 3</h2>
  9.         <div class="results" id="trial-1"> <canvas class="show-results"></canvas></div>
  10.         <h2>Trial 4</h2>
  11.         <div class="results" id="trial-1"> <canvas class="show-results"></canvas></div>
  12.         <h2>Trial 5</h2>
  13.         <div class="results" id="trial-1"> <canvas class="show-results"></canvas></div>
  14.         <h2>Results Overall</h2>
  15.         <div class="results" id="trial-1"> <canvas class="show-results"></canvas></div>
  16.     </div>
  17. </main>
  18. <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  19. <script>
  20.     const ctx = document.getElementsByClassName("show-results");
  21.     for (let i = 0; i < ctx.length; i++) {
  22.         new Chart(ctx[i], {
  23.             type: 'bar',
  24.             data: {
  25.                 labels: ['Lua', 'Python', 'JavaScript', 'Java', 'C', 'C++', 'F#', 'Haskell', 'C#', 'Rust', 'Go'],
  26.                 datasets: [{
  27.                     label: 'Time to compile and run',
  28.                     data: [12, 19, 3, 5, 2, 3],
  29.                     borderWidth: 1
  30.                 }]
  31.             },
  32.             options: {
  33.                 scales: {
  34.                     y: {
  35.                         beginAtZero: true
  36.                     }
  37.                 }
  38.             }
  39.         });
  40.     }
  41. </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.

  1.     &lt;main&gt;
  2. &lt;div class=&quot;content&quot;&gt;
  3. &lt;h1&gt;Results&lt;/h1&gt;
  4. &lt;h2&gt;Trial 1&lt;/h2&gt;
  5. &lt;div class=&quot;results&quot; class=&quot;results&quot; id=&quot;trial-1&quot;&gt; &lt;canvas class=&quot;show-results&quot;&gt;&lt;/canvas&gt;&lt;/div&gt;
  6. &lt;h2&gt;Trial 2&lt;/h2&gt;
  7. &lt;div class=&quot;results&quot; id=&quot;trial-1&quot;&gt; &lt;canvas class=&quot;show-results&quot;&gt;&lt;/canvas&gt;&lt;/div&gt;
  8. &lt;h2&gt;Trial 3&lt;/h2&gt;
  9. &lt;div class=&quot;results&quot; id=&quot;trial-1&quot;&gt; &lt;canvas class=&quot;show-results&quot;&gt;&lt;/canvas&gt;&lt;/div&gt;
  10. &lt;h2&gt;Trial 4&lt;/h2&gt;
  11. &lt;div class=&quot;results&quot; id=&quot;trial-1&quot;&gt; &lt;canvas class=&quot;show-results&quot;&gt;&lt;/canvas&gt;&lt;/div&gt;
  12. &lt;h2&gt;Trial 5&lt;/h2&gt;
  13. &lt;div class=&quot;results&quot; id=&quot;trial-1&quot;&gt; &lt;canvas class=&quot;show-results&quot;&gt;&lt;/canvas&gt;&lt;/div&gt;
  14. &lt;h2&gt;Results Overall&lt;/h2&gt;
  15. &lt;div class=&quot;results&quot; id=&quot;trial-1&quot;&gt; &lt;canvas class=&quot;show-results&quot;&gt;&lt;/canvas&gt;&lt;/div&gt;
  16. &lt;/div&gt;
  17. &lt;/main&gt;
  18. &lt;script src=&quot;https://cdn.jsdelivr.net/npm/chart.js&quot;&gt;&lt;/script&gt;
  19. &lt;script&gt;
  20. const ctx = document.getElementsByClassName(&quot;show-results&quot;);
  21. for (let i = 0; i &lt; ctx.length; i++) {
  22. new Chart(ctx[i], {
  23. type: &#39;bar&#39;,
  24. data: {
  25. labels: [&#39;Lua&#39;, &#39;Python&#39;, &#39;JavaScript&#39;, &#39;Java&#39;, &#39;C&#39;, &#39;C++&#39;, &#39;F#&#39;, &#39;Haskell&#39;, &#39;C#&#39;, &#39;Rust&#39;, &#39;Go&#39;],
  26. datasets: [{
  27. label: &#39;Time to compile and run&#39;,
  28. data: [12, 19, 3, 5, 2, 3],
  29. borderWidth: 1
  30. }]
  31. },
  32. options: {
  33. scales: {
  34. y: {
  35. beginAtZero: true
  36. }
  37. }
  38. }
  39. });
  40. }
  41. &lt;/script&gt;

答案1

得分: 0

仅翻译代码部分如下：

  1. backgroundColor: [
  2.     'rgba(239, 197, 45, 1)'
  3. ]

请注意，上述代码是 JavaScript 中的一部分，用于设置图表的背景颜色。

英文:

Simpy add

  1.                 &#39;rgba(239, 197, 45, 1)&#39;
  2. ]

To the datasets array in your code.

  1. &lt;script src=&quot;https://cdn.jsdelivr.net/npm/chart.js&quot;&gt;&lt;/script&gt;
  2. &lt;script&gt;
  3. const ctx = document.getElementsByClassName(&quot;show-results&quot;);
  4. for (let i = 0; i &lt; ctx.length; i++) {
  5. new Chart(ctx[i], {
  6. type: &#39;bar&#39;,
  7. data: {
  8. labels: [&#39;Lua&#39;, &#39;Python&#39;, &#39;JavaScript&#39;, &#39;Java&#39;, &#39;C&#39;, &#39;C++&#39;, &#39;F#&#39;, &#39;Haskell&#39;, &#39;C#&#39;, &#39;Rust&#39;, &#39;Go&#39;],
  9. datasets: [{
  10. label: &#39;Time to compile and run&#39;,
  11. data: [12, 19, 3, 5, 2, 3],
  12. borderWidth: 1,
  13. backgroundColor: [
  14. &#39;rgba(239, 197, 45, 1)&#39;
  15. ]
  16. }]
  17. },
  18. options: {
  19. scales: {
  20. y: {
  21. beginAtZero: true
  22. }
  23. }
  24. }
  25. });
  26. }
  27. &lt;/script&gt;

huangapple
  • 本文由 发表于 2023年2月14日 04:06:55
  • 转载请务必保留本文链接：https://go.coder-hub.com/75440695.html
  • chart.js3
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定