如何动态调整 React chart 2 饼图的大小

Posted 2023-02-16

【中文标题】如何动态调整 React chart 2 饼图的大小

【英文标题】：How do I dynamically adjust the size of the React chart 2 pie chart

【发布时间】：2021-03-01 16:59:49

【问题描述】：

标题是动态的。号码不清楚。这就是为什么我不能给出一个固定的高度。图形越来越小。如何使图表大小动态化？

const options = 
      legend: 
        "position": "bottom",
        align:'start',
        display:true,
        itemWrap: true,
      ,
      responsive: true,
      maintainAspectRatio: false,
      animation: false,
    ;

  <div className=styles['department-charts__card__altCard']>
            <Doughnut
            data=doughnutData
            options=options
        />
    </div>

如果图例太多，图形会变小。使用 Legend，图表不会出现在单独的容器中。当我检查它看起来像这样

  <canvas   class="chartjs-render-monitor" style="display: block; height: 300px; width: 271px;"></canvas>

我希望蛋糕至少有 300 像素。使用 Legend 可以更方便地检查馅饼是否在不同的容器中。我怎样才能让这个节目充满活力？馅饼根本不会出现在小屏幕上。如果某些值中有 3 或 4，则不是问题。如果太多了，就不合适了。我不想隐藏图例

【参考方案1】：

Amme hizmeti， Ben bu şekilde çözdüm。 Özel bir efsane yarattım

import  Doughnut  from 'react-chartjs-2';

const options = 
  legend: 
    "position": "bottom",
    display:false,
  ,
  responsive: true,
  maintainAspectRatio: false,
  animation: false,
  offset:true
;

let chartInstance = null;

const DepartmentCharts = (
  t, departmentDistribution
) => 
  const keys = departmentDistribution.map(it => 
    const key = it.key
    return t(key)
  ) || [t('salesAndMarketing'), t('ik'), t('management')]

  const values = departmentDistribution.map(it => it.value) || [0, 0, 0]
  const doughnutData = 
    labels: keys,
    datasets: [
      data: values,
      backgroundColor: [
        '#FF6384',
        '#36A2EB',
        '#FFCE56',
        '#8bc34a',
        '#6c429b',
        '#00a860',
        '#0154a3',
        '#f78f1e',
        "#CCCC99",
        "#666666",
        "#FFCC66",
        "#6699CC",
        "#663366",
        "#9999CC",
        "#CCCCCC",
        "#669999",
        "#CCCC66",
        "#CC6600",
        "#9999FF",
        "#0066CC",
        "#99CCCC",
        "#999999",
        "#FFCC00",
        "#009999",
        "#99CC33",
        "#FF9900",
        "#999966",
        "#66CCCC",
        "#339966",
        "#CCCC33",
        "#003f5c",
        "#665191",
        "#a05195",
        "#d45087",
        "#2f4b7c",
        "#f95d6a",
        "#ff7c43",
        "#ffa600",
        "#EF6F6C",
        "#465775",
        "#56E39F",
        "#59C9A5",
        "#5B6C5D",
        "#0A2342",
        "#2CA58D",
        "#84BC9C",
        "#CBA328",
        "#F46197",
        "#DBCFB0",
        "#545775"


      ],
      hoverBackgroundColor: [
        '#FF6384',
        '#36A2EB',
        '#FFCE56',
        '#8bc34a',
        '#6c429b',
        '#00a860',
        '#0154a3',
        '#f78f1e',
        "#CCCC99",
        "#666666",
        "#FFCC66",
        "#6699CC",
        "#663366",
        "#9999CC",
        "#CCCCCC",
        "#669999",
        "#CCCC66",
        "#CC6600",
        "#9999FF",
        "#0066CC",
        "#99CCCC",
        "#999999",
        "#FFCC00",
        "#009999",
        "#99CC33",
        "#FF9900",
        "#999966",
        "#66CCCC",
        "#339966",
        "#CCCC33",
        "#003f5c",
        "#665191",
        "#a05195",
        "#d45087",
        "#2f4b7c",
        "#f95d6a",
        "#ff7c43",
        "#ffa600",
        "#EF6F6C",
        "#465775",
        "#56E39F",
        "#59C9A5",
        "#5B6C5D",
        "#0A2342",
        "#2CA58D",
        "#84BC9C",
        "#CBA328",
        "#F46197",
        "#DBCFB0",
        "#545775"
      ]
    ]
  ;


  const handleClick = (e, index) => 
    const ctx = chartInstance.chartInstance;
    const meta = ctx.getDatasetMeta(0);

    // See controller.isDatasetVisible comment
    meta.data[index].hidden = !meta.data[index].hidden;

    // Toggle strikethrough class
    if (e.currentTarget.classList.contains("disable-legend")) 
      //console.log("çizgiyi kaldır")
      e.currentTarget.classList.remove("disable-legend");
      e.currentTarget.style.textDecoration = "inherit";
     else 
      //console.log("çizgi çiz")
      e.currentTarget.classList.add("disable-legend");
      e.currentTarget.style.textDecoration = "line-through";
    
    chartInstance.chartInstance.update();
  ;

  useEffect(() => 
    const legend = chartInstance.chartInstance.generateLegend();

    document.getElementById("legend").innerhtml = legend;

    document.querySelectorAll("#legend li").forEach((item, index) => 
      item.addEventListener("click", (e) => handleClick(e, index));
    );
  , [doughnutData]);




  return (
    <div className=styles['department-charts']>
      <Card className=styles['department-charts__card']>
        <CardHeader
          title=`$t('departmentTitle')`
          align='center'
        />
        <CardContent>
          <div className=styles['department-charts__card__altCard']>
            <Doughnut
              data=doughnutData
              options=options
              ref=input => 
                chartInstance = input;
              
            />
          </div>
          <div id="legend" className=styles['department-charts__card__altCard__legend']/>

        </CardContent>
      </Card>
    </div>
  );
;

style.css - efsane kısmı sizin için Yeterli olabilir

.department-charts 
  height: 100%;
  &__card 
    height: 100%;
    padding: 16px;
    &__altCard
      min-height: 235px;
        &__legend
          color: #666666;
          ul
            list-style: none;
            font: 12px Verdana;
            white-space: nowrap;
            display: inline-block;
            padding-top: 20px;
            font-family: "Helvetica Neue";
          
          li
            cursor: pointer;
            float: left;
            padding-left: 7px;
            span
              width: 36px;
              height: 12px;
              display: inline-block;
              margin: 0 5px 8px 0;
              vertical-align: -9.4px;
            
          


      
    
  


.disable-legend 
  text-decoration: line-through;