Изменить диаграмму. js Текст легенды - PullRequest
Новая
       9

Изменить диаграмму. js Текст легенды

0 голосов
/ 09 апреля 2020

Я пытаюсь проверить, может ли Chart. js изменить текст легенды со значения по умолчанию «вправо» на «влево». Мне также нужно иметь возможность размещать два типа данных на обеих сторонах usePointStyle. В настоящее время я использую ReactJS.

Это то, что у меня сейчас есть: Legend text on the right

Мне нужна диаграмма. js для отображения текста легенды в виде Итак: usePointStyle label is wedge between the two text

Я попытался просмотреть всю документацию на графике. js, но пришел с пустыми руками.

Вот мой фрагмент кода: 

<Doughnut
      width={120}
      height={100} 
      data={tradeFileNames}
      options={{
        cutoutPercentage: 55,
        elements: {
          center: {
            text: `${numeral(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: true,
          position: "right",
          align: "center",
          fontFamily: "Allianz-Neo",
          textDirection: 'ltr',
            labels: {
              usePointStyle: true,
              fontColor: "#006192",
            }
        }
      }}
      />

1 Ответ

0 голосов
/ 10 апреля 2020

Я полагаю, вам нужно добавить legendCallback в options - см. Раздел HTML легенды здесь:

https://www.chartjs.org/docs/latest/configuration/legend.html

  • Вверх: вы можете рендерить практически все, что хотите
  • Недостаток: вам нужно сгенерировать легенду, вызвав generateLegend себя

Здесь есть решение, которое вы можете попробовать : https://github.com/jerairrest/react-chartjs-2/issues/81

Если вы примените этот код, вы будете выглядеть примерно так: 

<>
   <Doughnut
      ref="chart"
      width={120}
      height={100} 
      data={tradeFileNames}
      options={{
        cutoutPercentage: 55,
        elements: {
          center: {
            text: `${numeral(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
        },
        legendCallback: (chart) => {
          // return whatever you need here based on chart.data 
        },
        legend: {
          display: true,
          position: "right",
          align: "center",
          fontFamily: "Allianz-Neo",
          textDirection: 'ltr',
            labels: {
              usePointStyle: true,
              fontColor: "#006192",
            }
        }
      }}
      />
      {this.refs.chart && this.refs.chart.chartInstance.generateLegend()}
</>
...