Question

有没有办法使用标准图例并以某种方式对其进行编辑，使其未居中对齐并且例如每个元素的固定宽度，所以看起来不那么混乱？

我知道生成html图例的方法，但因此打开或关闭数据集的功能会丢失，就像使用内置图例一样。

让图例自动排序的最佳方式是什么？向左浮动每个元素的固定尺寸并保持所有交互仍然可用？ Thanx的帮助。 basic generated legend for chart.js (aligment centered)

Answer 1

在收到没有关于这个问题的反馈之后，我想这个例子可以帮助其他人快速解决如何为chart.js创建一个有序且更好看的图例，并保持所有交互可用。

此示例为每个项目生成固定框。它会将图例项目分成第二行 - 保持列宽度 - 同时最小化图表的宽度。

function updateLegendAction(e, datasetIndex) {
	var index = datasetIndex;
    var ci = e.view.chart;
    var meta = ci.getDatasetMeta(index);
    // See controller.isDatasetVisible comment
    meta.hidden = meta.hidden === null? !ci.data.datasets[index].hidden : null;
	document.getElementById("label"+index).style.opacity = document.getElementById("label"+index).style.opacity === '0.2' ? '1' : '0.2';
	// We hid a dataset ... rerender the chart
     ci.update();                                                                                      
};    

Chart.defaults.global.defaultFontFamily = 'Helvetica', 'Helvetica Neue', 'Arial', 'sans-serif';
Chart.defaults.global.defaultFontColor = 'grey';

var chart = new Chart(myChart, {
  type: 'line',
  data: {
  labels: ["January", "February", "March", "April"],
  datasets: [{
    label: "First dataset",
    fillColor: "rgba(220,220,220,0.2)",
    borderColor: "rgba(220,20,20,1)",
    pointColor: "rgba(220,20,20,1)",
    pointStrokeColor: "#fff",
    borderWidth: 3,
    pointHighlightFill: "#fff",
    pointHighlightStroke: "rgba(220,220,220,1)",
    data: [65, 59, 80, 81]
  }, {
    label: "Second dataset",
    fillColor: "rgba(151,187,205,0.2)",
    borderColor: "rgba(15,187,25,1)",
    pointColor: "rgba(15,187,25,1)",
    pointStrokeColor: "#fff",
    borderWidth: 3,
    pointHighlightFill: "#fff",
    pointHighlightStroke: "rgba(151,187,205,1)",
    data: [38, 55, 50, 65]
  },{
    label: "Third dataset",
    fillColor: "rgba(220,220,220,0.2)",
    borderColor: "rgba(220,20,20,1)",
    pointColor: "rgba(220,20,20,1)",
    pointStrokeColor: "#fff",
    borderWidth: 3,
    pointHighlightFill: "#fff",
    pointHighlightStroke: "rgba(220,220,220,1)",
    data: [4, 56, 34, 21]
  },{
    label: "And so on...",
    fillColor: "rgba(220,220,220,0.2)",
    borderColor: "rgba(220,20,20,1)",
    pointColor: "rgba(220,20,20,1)",
    pointStrokeColor: "#fff",
    borderWidth: 3,
    pointHighlightFill: "#fff",
    pointHighlightStroke: "rgba(220,220,220,1)",
    data: [25, 13, 11, 5]
  }]
  },
  options: {
      responsive: false,
      //Define a new HTML Legend
      legendCallback: function(legendarray) {
            var legendHtml = [];
			legendHtml.push('<div class="boxxcontainer">');
            for (var i=0; i<legendarray.data.datasets.length; i++) {
                legendHtml.push('<div id="label' + i + '" class="containerItem" style="width:' + (100/(legendarray.data.datasets.length)-1) +'%;"> <div class="boxx" style="background-color:' + legendarray.data.datasets[i].fillColor + '; border-top:' + legendarray.data.datasets[i].borderWidth +'px solid ' + legendarray.data.datasets[i].borderColor +';"></div>');                    
                if (legendarray.data.datasets[i].label) {
                    legendHtml.push('<div class="boxxlabel" onclick="updateLegendAction(event, ' + '\'' + legendarray.legend.legendItems[i].datasetIndex + '\'' + ')">&nbsp;' + legendarray.data.datasets[i].label + '</div></div>');
                }                                                                              
            }      			
			legendHtml.push('</div>');                                                   
            return legendHtml.join("");                                                        
        }, 
      legend: {
		   display: false,
	   },
     scales: {
      yAxes: [{
        ticks:{
          min: 0,
          max: 100,
         }
      }]
     }
      },
}, newlegend);
var newlegend = document.getElementById("htmllegend").innerHTML = chart.generateLegend();

div {
  font-family: 'Helvetica', 'Helvetica Neue', 'Arial', 'sans-serif';
}

.boxxcontainer {
  margin-left:30px;
  width: 90%;
  float: left;
}

.boxx {
  background-color: green;
  width: 10%;
  height: 15px;
  margin-left: 0%;
  float: left;
  line-height: 100%;
  display: block;
  border-top: 1px solid white;
}

.boxxlabel {
  color: grey;
  font-size: 13px;
  width: 86%;
  margin-left: 2%;
  float: left;
  line-height: 125%;
  display: block;
  cursor: pointer;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.containerItem {
  height: 30px;
  min-width:150px;
  float: left;
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<div id="htmllegend"></div>
<canvas id="myChart" width="600" height="400"></canvas>

调整chart.js的图例元素对齐方式

1 个答案: