Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/ssh/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Reactjs 如何使数据标签适合于条形图_Reactjs_React Chartjs - Fatal编程技术网

Reactjs 如何使数据标签适合于条形图

Reactjs 如何使数据标签适合于条形图,reactjs,react-chartjs,Reactjs,React Chartjs,我使用react-chartjs-2创建条形图。我面临的问题是数据标签。数据标签显示在每个栏中。在正常显示中,它们安装在条内。但当屏幕大小增加到140%以上时,数据标签就会从条中溢出。我试着遵循几个解决方案,但没有任何帮助 请参见所附的屏幕截图: 这是我的密码: let test= []; let max= []; let minmalvalue; this.props.chartData.datasets.map((item)=>{ if(item.

我使用react-chartjs-2创建条形图。我面临的问题是数据标签。数据标签显示在每个栏中。在正常显示中,它们安装在条内。但当屏幕大小增加到140%以上时,数据标签就会从条中溢出。我试着遵循几个解决方案,但没有任何帮助

请参见所附的屏幕截图:

这是我的密码:

let test= [];
    let max= [];
    let minmalvalue;
    this.props.chartData.datasets.map((item)=>{
      if(item.label != "% Coverage")
     test = test.concat(item.data);
     max = test.reduce(function(a, b) {
      return Math.max(a, b);
  });
    });
    minmalvalue = 0.03*max;
    let finalvalue=Math.round(minmalvalue);
    finalvalue=finalvalue+1;
     console.log(finalvalue);
    let options = {
      tooltips: {
        enabled: true
      },
      scales: {
        xAxes: [{
          barPercentage: 0.8,
          categoryPercentage: 0.7,
          stacked: true,
          gridLines: {
            display:false
          }
        }],
        yAxes: [
          {
            id: 'y-axis-1',
            stacked: true,
            display: true,
            position: 'left',
            gridLines: {
              display:false
            }
          },
          {
            id: 'y-axis-2',
            stacked: true,
            display: true,
            position: 'right',
            ticks: {
              min: 0,
              max: 100,
              callback: function (value) {return value + "%";}
            },
            gridLines: {
              display:false
            }
          }
        ]
      },
      legend: {
        display: true,
        labels: {
          fontColor: "#000000"
        }
      },
      plugins:  {
        datalabels: {
          display: function(context) {
            return (context.dataset.data[context.dataIndex] !== 0 && context.dataset.data[context.dataIndex] !== "0" && context.dataset.data[context.dataIndex] >= finalvalue); // or >= 1 or ...
          },
          color: 'black',
          align: 'bottom',
          anchor: 'bottom',
          padding:'0px',
          font: {
            weight: 'bold',
            size :15
         },
          formatter: function (datasets, data) {
            if(datasets === 0 || datasets === "0") {
              return;
            }
            if(data.dataset.label === "% Coverage"){
              console.log("datasets", datasets);
              return datasets + "%";
            }
          }
        }
      }
    };
我想把数据标签放在条里面。即使在放大/缩小的情况下,也不应超出条形图的边界