Блог

Главная - Вопросы по программированию - Невозможно изменить символ легенды на округленный квадрат в chartjs в React

Невозможно изменить символ легенды на округленный квадрат в chartjs в React

#javascript #reactjs #responsive-design #icons #chart.js

#javascript #reactjs #адаптивный дизайн #Значки #chart.js

Вопрос:

Я создаю пончиковую диаграмму с приведенным ниже кодом:-

 <Doughnut
        data={this.props.chartdataSet}
        options={{
          title: {
            display: false,
            text: [this.props.title,'Eligible Amount : $180'],
            fontSize: 18,
            fontFamily:'Arial',
            lineHeight:1.5
          },
          tooltips:{
            enabled:false
          },
          legend: {
            display: true,
            position: "bottom",
            align:'start',
            reverse:true,
            labels :{
              padding:10,
              boxWidth:12,
              fontSize:13
            },
          },
        }}
        height={200}

      />

Теперь моя диаграмма похожа:-
значки sqauare

Теперь я хочу эти квадратные значки с закругленным квадратом в углах, я использовал usePointStyle, но его оформление в виде круга могу ли я получить помощь в создании закругленных значков

Комментарии:

1. Диаграмма DoughnutChart не имеет параметров pointstyles. вы можете проверить это здесь . Я думаю, что это работает только для линейных диаграмм

Ответ №1:

Вы можете отключить стандартную легенду и вместо этого сгенерировать свою собственную HTML-легенду.

 componentDidMount() {
  this.generateLegend(document.getElementById("legend"), this.refs.chart.chartInstance);
}

generateLegend(div, chart) {
  let ul = document.createElement("ul");
  chart.data.labels.forEach((l, i) => {
    let ds = chart.data.datasets[0];
    let bgColor = ds.backgroundColor[i];
    let border = ds.borderWidth   "px solid "   ds.borderColor[i];

    let li = document.createElement("li");
    let symbolSpan = document.createElement("span");
    symbolSpan.style.cssText = "width: 6px; height: 14px; background-color:"   bgColor   "; border:"   border   ";";
    li.appendChild(symbolSpan);

    let labelSpan = document.createElement("span");
    labelSpan.innerHTML = l;

    symbolSpan.onclick = function() {
      let hidden = !chart.getDatasetMeta(0).data[i].hidden;
      chart.getDatasetMeta(0).data[i].hidden = hidden;
      labelSpan.style.textDecoration = hidden ? "line-through" : "";
      chart.update();
    };
    labelSpan.onclick = function() {
      let hidden = !chart.getDatasetMeta(0).data[i].hidden;
      chart.getDatasetMeta(0).data[i].hidden = hidden;
      labelSpan.style.textDecoration = hidden ? "line-through" : "";
      chart.update();
    };

    li.appendChild(labelSpan);
    ul.appendChild(li);
  });
  div.appendChild(ul);
}

Пожалуйста, взгляните на этот StackBlitz и посмотрите, как это работает.