Отключить диаграмму JS кольцевые метки и текст внутри настройки - PullRequest
0 голосов
/ 17 апреля 2020

Я пытаюсь отключить значения внутри ярлыков пончика, но не могу понять это после попытки все отключить. Кроме того, у меня будет sh, чтобы числовой текст внутри моего пончика был больше. Ниже скриншот того, что у меня сейчас. Стрелки указывают на проблемы, которые я описал выше. Заранее спасибо!

enter image description here

Мой фрагмент кода плагина

  afterUpdate(chart) {
    let helpers;
    let centerConfig;
    let globalConfig;
    let ctx;
    let fontStyle;
    let fontFamily;
    let fontSize;
    if (chart.config.options.elements.center) {
      helpers = Chart.helpers;
      centerConfig = chart.config.options.elements.center;
      globalConfig = Chart.defaults.global;
      ctx = chart.chart.ctx;

      fontStyle = helpers.getValueOrDefault(
        centerConfig.fontStyle, globalConfig.defaultFontStyle
      );
      fontFamily = helpers.getValueOrDefault(
        centerConfig.fontFamily, globalConfig.defaultFontFamily
      );

      if (centerConfig.fontSize) {
        fontSize = centerConfig.fontSize;
      } else {
        ctx.save();
        fontSize = helpers.getValueOrDefault(centerConfig.minFontSize, 1);
        ctx.restore();
      }
      const newChart = chart;
      newChart.center = {
        font: helpers.fontString(fontSize, fontStyle, fontFamily),
        fillStyle: helpers.getValueOrDefault(
            centerConfig.fontColor, globalConfig.defaultFontColor
          )
      };
    }
  },
  afterDraw(chart) {
    if (chart.center) {
      const centerConfig = chart.config.options.elements.center;
      const ctx = chart.chart.ctx;
      ctx.save();
      ctx.font = chart.center.font;
      ctx.fillStyle = chart.center.fillStyle;
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      const centerX = (chart.chartArea.left + chart.chartArea.right) / 2;
      const centerY = (chart.chartArea.top + chart.chartArea.bottom) / 2;
      let helpers = Chart.helpers;
      let fontSize = helpers.getValueOrDefault(centerConfig.minFontSize, 1);
      let text = centerConfig.text.split('\ ');
      ctx.fillText(text[0], centerX, centerY - fontSize / 2);
      ctx.fillText(text[1], centerX, centerY + fontSize / 2);
      ctx.fillText(text[2], centerX, centerY + 10 + fontSize);
      ctx.fillText(text[3], centerX, centerY + 25 + fontSize);
      ctx.restore();
    }
  },
});

          <Doughnut 
            width={120}
            height={100} 
            data={donutData}
              options={{
                cutoutPercentage: 55,
                elements: {
                  center: {
                    text: `${numeral(donutData.total).format("0,0")} ${innerTopText} ${innerMiddleText} ${innerBottomText}`,
                    fontColor: "#666666",
                    fontFamily: "Allianz-Neo",
                    fontStyle: "bold",
                    minFontSize: 15,
                    maxFontSize: 20
                  }
                },
                plugins: {
                  outlabels: {
                    backgroundColor: "white", // Background color of Label
                    borderColor: "none", // Border color of Label
                    borderRadius: 0, // Border radius of Label
                    borderWidth: 0, // Thickness of border
                    color: "black", // Font color
                    display: false,
                    lineWidth: 1, // Thickness of line between chart arc and Label
                    padding: 0,
                    lineColor: "black",
                    textAlign: "center",
                    stretch: 45,
                  },
                  labels: false,
                },
                legend: {
                  display: false,
                },
                tooltips: {
                  backgroundColor: "#003781",
                  displayColors: false,
                  borderColor: "white",
                  borderWidth: 2,
                }
              }}
          />
...