Chart. js - Styling Legend - ОДНА запись легенды в строке - PullRequest
Новая
       21

Chart. js - Styling Legend - ОДНА запись легенды в строке

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

Мне нужно, чтобы все записи легенды всегда были с новой строки:

new line

, а сейчас у меня такая ситуация:

this situation

Я искал Vue Диаграмму. js легенда или метка легенды вариант, чтобы помочь мне, но я не могу найти ни одного. Может кто знает такой вариант?

мой код: 

export default {
extends : Pie,
computed: {....},
mounted() {

  this.renderChart({ .... }, {
    responsive         : true,
    maintainAspectRatio: false,

    legend             : {
      position: 'bottom',
      align: "start",

      labels:{
        boxWidth: 20,
        usePointStyle:true
        ???
      }
    }
  });
}

};

1 Ответ

1 голос
/ 22 апреля 2020

Нет способа (пока - правда до 20 апреля) решить эту проблему с помощью API. Вы должны генерировать custom HTML легенды. https://www.chartjs.org/docs/latest/configuration/legend.html#html -legends

Идея - вы генерируете (с помощью l oop) любую HTML разметку, которую хотите - и генерируете это внутри DOM ( Not *) 1009 * как часть диаграммы. js холст).

** Помните, generateLegend() легенды по умолчанию не активируются.

Пример "Hello world" пример: 

var data = {
  labels: [
    "Red",
    "Blue",
    "orange"
  ],
  datasets: [{
    data: [300, 50, 100],
    backgroundColor: [
      "red",
      "blue",
      "orange"
    ],
    borderWidth: 1
  }]
};

var options = {
  legend: false,
  legendCallback: function(chart) {
    var elem = [];
    elem.push('<ul class="custom-legends">');
    for (var i = 0; i < chart.data.datasets[0].data.length; i++) {
      elem.push('<li><span class="dot" style="background-color:' + chart.data.datasets[0].backgroundColor[i] + '"></span>');
      if (chart.data.labels[i]) {
        elem.push(chart.data.labels[i]);
      }
      elem.push('</li>');
    }
    elem.push('</ul>');
    return elem.join("");
  },
}
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'doughnut',
  data: data,
  options: options
});



var legentElement = document.getElementById("legend");
/* insert custom HTML inside custom div */
legentElement.innerHTML = myChart.generateLegend();
ul.custom-legends{
  border: 1px solid black;
  list-style-type: none;
  padding-left: 0px;

}

ul.custom-legends li{
  border: 1px solid lightgray;
  list-style-type: none;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: left;
}

.dot{
  border-radius: 50px;
  height: 10px;
  width: 10px;
  margin-right: 10px;
}
<div id="legend"></div>
<canvas id="myChart"></canvas>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
...