如何设置点击时的活动背景颜色？

问题描述 投票：0回答：1

我正在使用 Chartjs-chart-venn 创建维恩图。我需要在单击时为单击的部分设置活动背景颜色。此外，我想在悬停时突出显示整个圆圈。

我尝试过点击

import React, { useEffect, useRef } from "react";
import { VennDiagramChart,  } from "chartjs-chart-venn";
export default function Diagram() {

    const config = {
        type: "venn",
        title: {
          display: true,
          text: 'Sports',
        },
        data: {
          labels: [
            "Volleyball",
            "Tenis",
            "Football",
            "Volleyball ∩ Tenis",
            "Volleyball ∩ Football",
            "Tenis ∩ Football",
            "Volleyball ∩ Tenis ∩ Football",
          ],
          datasets: [
            {
              label: "Sports",
              data: [
                  { label: 'Volleyball', sets: ["Volleyball"], value: 4},
                  { label: 'Tenis', sets: ["Tenis"], value: 4, },
                  { label: 'Football', sets: ["Football"], value: 4, }, 
                  { label: 'Volleyball ∩ Tenis', sets: ["Volleyball", "Tenis"], value: '',  },
                  { label: 'Volleyball ∩ Football', sets: ["Volleyball", "Football"], value:'', },
                  { label: 'Tenis ∩ Football', sets: ["Tenis", "Football"], value: '', }, 
                  { label: 'Volleyball ∩ Tenis ∩ Football', sets: ["Volleyball", "Tenis", "Football"], value: 3,  }, 
              ],
            },
          ],
        },
        options: {
            events: ['click'],
            interaction: {
                mode: 'nearest',
                intersect: false,
              },
          layout: {
              padding: 20
          },
          title: {
            display: true,
            text: "Chart.js Venn Diagram Chart",
          },
          onClick: (event, elements, chart) => {
            const color = [
                "rgba(222, 215, 243, 0.4)",
                "rgba(253, 244, 204, 0.4)",
                "rgba(237, 221, 205, 0.4)",
                "rgba(229, 216, 195, 0.4)",
                "rgba(153, 102, 255, 0.4)",
                "rgba(255, 159, 64, 0.4)",
              ];
              chart.config.data.datasets[0].backgroundColor = color; 
            const points = chart.getElementsAtEventForMode(event, 'nearest', { intersect: true }, true);
            if (points.length > 0) {
                console.log(points);
                const datasetIndex = points[0].datasetIndex;
                const dataIndex = points[0].index;
                const dataset = config.data.datasets[datasetIndex];
                const data = dataset.data[dataIndex];
                
                points[0].element.options.backgroundColor = 'red';
                chart.update();
            }
          },
          borderWidth: 2,
            backgroundColor: [
              "rgba(222, 215, 243, 0.4)",
              "rgba(253, 244, 204, 0.4)",
              "rgba(237, 221, 205, 0.4)",
              "rgba(229, 216, 195, 0.4)",
              "rgba(153, 102, 255, 0.4)",
              "rgba(255, 159, 64, 0.4)",
            ],
            borderColor: [
              "rgba(155, 130, 217, 0.4)",
              "rgba(250, 226, 118, 0.4)",
              "rgba(202, 152, 101, 0.4)",
              "rgba(246, 217, 93, 0.4)",
              "rgba(153, 102, 255, 0.4)",
              "rgba(255, 159, 64, 0.4)",
            ],
        },
        scales:[
          {
              x: {
                  ticks: {
                      font: {
                          size: 14
                      },
                      color: 'black'
                  }
              },
              y: {
                  ticks: {
                      font: {
                          size: 14
                      },
                      color: 'black'
                  }
              }
          }
        ]
      };
    
  const chartRef = useRef(null);

  useEffect(() => {
    const ctx = document.getElementById("canvas2").getContext("2d");
    if (chartRef.current) {
      chartRef.current.destroy();
    }
    chartRef.current = new VennDiagramChart(ctx, config);
    return () => {
      if (chartRef.current) {
        chartRef.current.destroy();
      }
    };
  }, []);

  return (
    <>
        <div className="chart-container" style={{"maxWidth": "700px;"}}>
        <canvas id="canvas2"></canvas>
        </div>
    </>
  );
}

结果，圆圈变红一秒，然后返回主色。 我希望那个圆圈保持红色。

charts chart.js
1个回答
0
投票

各部分的持久颜色通过图表选项设置， 在 

chart.options.backgroundColor
或数据集中，例如， 
chart.data.datasets[0].backgroundColor
。因此，
onClick
处理程序 可以减少到

onClick: (_, elements, chart) => {
   const color = [...chart.config.options.backgroundColor];
   for(const {index} of elements){
      color[index] = 'red';
   }
   chart.config.data.datasets[0].backgroundColor = color;
   chart.update();
}

为了避免颜色 中心三组交集获得第一组的颜色，其中一个有 也设置那个颜色，即使它是

"transparent"
。这同样适用于 传说彩盒。

演示片段：

const config = {
   type: "venn",
   title: {
      display: true,
      text: 'Sports',
   },
   data: {
      labels: [
         "Volleyball",
         "Tenis",
         "Football",
         "Volleyball ∩ Tenis",
         "Volleyball ∩ Football",
         "Tenis ∩ Football",
         "Volleyball ∩ Tenis ∩ Football",
      ],
      datasets: [
         {
            label: "Sports",
            data: [
               {label: 'Volleyball', sets: ["Volleyball"], value: 4},
               {label: 'Tenis', sets: ["Tenis"], value: 4,},
               {label: 'Football', sets: ["Football"], value: 4,},
               {label: 'Volleyball ∩ Tenis', sets: ["Volleyball", "Tenis"], value: '',},
               {label: 'Volleyball ∩ Football', sets: ["Volleyball", "Football"], value: '',},
               {label: 'Tenis ∩ Football', sets: ["Tenis", "Football"], value: '',},
               {label: 'Volleyball ∩ Tenis ∩ Football', sets: ["Volleyball", "Tenis", "Football"], value: 3,},
            ],
         },
      ],
   },
   options: {
      interaction: {
         mode: 'nearest',
         intersect: false,
      },
      layout: {
         padding: 20
      },
      title: {
         display: true,
         text: "Chart.js Venn Diagram Chart",
      },
      onClick: (_, elements, chart) => {
         const color = [...chart.config.options.backgroundColor];
         for(const {index} of elements){
            color[index] = 'red';
         }
         chart.config.data.datasets[0].backgroundColor = color;
         chart.update();
      },
      borderWidth: 2,
      backgroundColor: [
         "rgba(222, 215, 243, 0.4)",
         "rgba(253, 244, 204, 0.4)",
         "rgba(237, 221, 205, 0.4)",
         "rgba(229, 216, 195, 0.4)",
         "rgba(153, 102, 255, 0.4)",
         "rgba(255, 159, 64, 0.4)",
         "transparent",
      ],
      borderColor: [
         "rgba(155, 130, 217, 0.4)",
         "rgba(250, 226, 118, 0.4)",
         "rgba(202, 152, 101, 0.4)",
         "rgba(246, 217, 93, 0.4)",
         "rgba(153, 102, 255, 0.4)",
         "rgba(255, 159, 64, 0.4)",
         "transparent"
      ],
      scales: {
         x: {
            ticks: {
               font: {
                  size: 14
               },
               color: 'black'
            }
         },
         y: {
            ticks: {
               font: {
                  size: 14
               },
               color: 'black'
            }
         }
      },
      plugins: {
         legend: {
            labels: {
               generateLabels(chart){
                  const labelItems = chart.constructor.defaults.plugins.legend.labels.generateLabels.call(this, chart);
                  labelItems[0].fillStyle = "rgba(222, 215, 243, 0.4)";
                  return labelItems;
               }
            }
         }
      }
   }
};
new Chart("myChart", config);
<div style="height: 300px">
   <canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/index.umd.min.js"></script>

“悬停时突出显示整个圆圈”是不相关的，并且会 如果可能的话，需要复杂的自定义代码。你可以问另一个问题。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.