时间戳

首页 > 解决方案 > 如何动态调整 React chart 2 饼图的大小

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

问题描述

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

在此处输入图像描述

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 height="600" width="542" class="chartjs-render-monitor" style="display: block; height: 300px; width: 271px;"></canvas>

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

标签： reactjsgraphchartslegend

解决方案

Amme hizmeti, 在此处输入图像描述 Ben bu şekilde çözdüm。厄泽尔比尔 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;
}

推荐阅读