ChartJS Charts.js颜色出现问题

g9icjywg  于 2022-11-07  发布在  Chart.js
关注(0)|答案(1)|浏览(313)

一个朋友帮助我使用Charts.js,我现在正在尝试在脑海中逆向工程他所做的显示数据的工作,使数据显示我喜欢的方式。通常有8-10行要画,所以我试图通过引入颜色使数据更容易阅读。
我可以通过设置borderColor的值使每条线都具有唯一的颜色,但是出现在线上的点与线不匹配,而是随着它们沿着线的移动而改变。我希望点与线一致。我不确定我在哪里出了问题。有人能帮助我解决这些颜色问题吗?

为了简单起见,我把下面的代码裁剪成了3种颜色,但是我在代码中Map出了11种颜色。下面的代码将沿着每条线循环3种点颜色。我所追求的是线的颜色,背景和点的颜色来匹配。

  1. <script setup lang="ts">
  2. import { Line } from "vue-chartjs";
  3. import {
  4. Chart as ChartJS,
  5. Title,
  6. Tooltip,
  7. Legend,
  8. LineElement,
  9. LinearScale,
  10. PointElement,
  11. CategoryScale,
  12. } from "chart.js";
  13. import type { DataYearlyGrowth} from "@/types/myData";
  14. import { useDark } from "@vueuse/core";
  15. ChartJS.register(
  16. Title,
  17. Tooltip,
  18. Legend,
  19. LineElement,
  20. LinearScale,
  21. PointElement,
  22. CategoryScale
  23. );
  24. const props = defineProps<{ data: Array<DataYearlyGrowth> }>();
  25. const chartId = "line-chart";
  26. const datasetIdKey = "label";
  27. const width = 300;
  28. const height = 100;
  29. const styles = {};
  30. const yearlyGrowthValues = props.data;
  31. const years = [...new Set(yearlyGrowthValues.map((x) => x.year.toString()))];
  32. const dataByTypes = yearlyGrowthValues.reduce((rv, x) => {
  33. (rv[x.type] = rv[x.type] || []).push(x.value);
  34. return rv;
  35. }, {} as { [key: string]: Array<any> });
  36. const chartData = {
  37. labels: years,
  38. datasets: Object.keys(dataByTypes).map((key) => ({
  39. text: 'Yearly growth',
  40. label: key, // TODO: Make the font colour white
  41. data: dataByTypes[key],
  42. hoverBackgroundColor: 'rgba(211, 211, 211, 0.8)',
  43. borderColor: // Line colour
  44. [
  45. 'rgba(138, 20, 21, 0.8)',
  46. 'rgba(241, 16, 22, 0.8)',
  47. 'rgba(249, 148, 0, 0.8)'
  48. ],
  49. backgroundColor: // Middle of line colour. Just colours the square in the key
  50. [
  51. 'rgba(138, 20, 21, 1)',
  52. 'rgba(241, 16, 22, 1)',
  53. 'rgba(249, 148, 0, 1)'
  54. ],
  55. pointBackgroundColor: // Colours the middle of the points where data intersects years
  56. [
  57. 'rgba(138, 20, 21, 0.8)',
  58. 'rgba(241, 16, 22, 0.8)',
  59. 'rgba(249, 148, 0, 0.8)'
  60. ],
  61. fill: true,
  62. borderWidth: 2,
  63. cubicInterpolationMode: 'monotone',
  64. //stepped: 'middle',
  65. stepped: false,
  66. borderJoinStyle: "round",
  67. tension: 0.2,
  68. }))
  69. };
  70. const chartOptions = {
  71. responsive: true,
  72. };
  73. </script>
  74. <template>
  75. <div class="bg-qual-mid">
  76. <Line
  77. :chart-options="chartOptions"
  78. :chart-data="chartData as any"
  79. :chart-id="chartId"
  80. :dataset-id-key="datasetIdKey"
  81. :plugins="[]"
  82. :styles="styles"
  83. :width="width"
  84. :height="height"
  85. />
  86. </div>
  87. </template>

此外,我试图让标签显示在白色我尝试了这个,但它没有区别

  1. const chartOptions = {
  2. legend: {
  3. labels: {
  4. fontColor: 'white'
  5. }
  6. },
  7. responsive: true,
  8. };
bxgwgixi

bxgwgixi1#

这是因为您将色彩定义为数组,如果您需要静态颜色,则只需提供1种静态颜色,如下所示:

  1. const colors = [
  2. 'rgba(138, 20, 21, 0.8)',
  3. 'rgba(241, 16, 22, 0.8)',
  4. 'rgba(249, 148, 0, 0.8)'
  5. ];
  6. const chartData = {
  7. labels: years,
  8. datasets: Object.keys(dataByTypes).map((key, i) => ({
  9. text: 'Yearly growth',
  10. label: key, // TODO: Make the font colour white
  11. data: dataByTypes[key],
  12. hoverBackgroundColor: 'rgba(211, 211, 211, 0.8)',
  13. borderColor: colors[i % colors.length], // Get color for this index, roll over if index is larger then array size
  14. backgroundColor: colors[i % colors.length], // Get color for this index, roll over if index is larger then array size
  15. pointBackgroundColor: colors[i % colors.length], // Get color for this index, roll over if index is larger then array size
  16. fill: true,
  17. borderWidth: 2,
  18. cubicInterpolationMode: 'monotone',
  19. //stepped: 'middle',
  20. stepped: false,
  21. borderJoinStyle: "round",
  22. tension: 0.2,
  23. }))
  24. };
展开查看全部

相关问题