Question

我一直在试图弄清楚如何使Chart.js中的图例以HTML格式打印出来，这样我就可以更灵活地设置它们的样式并定位它们。

我在同一页面上有几个不同的图表，我想知道是否可以使用全局参数完成所有这些操作。

这是我的JSFiddle：https://jsfiddle.net/js74dp2u/

Chart.defaults.global.defaultFontFamily = "'Open Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif";
Chart.defaults.global.defaultFontSize = 14;
Chart.defaults.global.legend.position = 'bottom';
Chart.defaults.global.legend.labels.usePointStyle = true;
Chart.defaults.global.legend.labels.boxWidth = 15;
Chart.defaults.global.legend.labels.padding = 10;
Chart.defaults.global.tooltips.backgroundColor = '#000';

var colors = [
  ['rgba(120, 199, 221, 1)', 'rgba(120, 199, 221, 0.4)'],
  ['rgba(125, 169, 210, 1)', 'rgba(125, 169, 210, 0.4)'],
  ['rgba(162, 108, 136, 1)', 'rgba(162, 108, 136, 0.4)'],
  ['rgba(237, 180, 133, 1)', 'rgba(237, 180, 133, 0.4)'],
  ['rgba(129, 151, 92, 1)', 'rgba(129, 151, 92, 0.4)'],
  ['rgba(99, 122, 152, 1)', 'rgba(99, 122, 152, 0.4)'],
  ['rgba(187, 156, 200, 1)', 'rgba(187, 156, 200, 0.4)'],
  ['rgba(249, 185, 170, 1)', 'rgba(249, 185, 170, 0.4)'],
  ['rgba(162, 76, 80, 1)', 'rgba(162, 76, 80, 0.4)'],
  ['rgba(199, 123, 74, 1)', 'rgba(199, 123, 74, 0.4)'],
  ['rgba(200, 139, 35, 1)', 'rgba(200, 139, 35, 0.4)']
];

var pieColors = [
  colors[0][0],
  colors[1][0],
  colors[2][0],
  colors[3][0],
  colors[4][0],
  colors[5][0],
  colors[6][0],
  colors[7][0],
  colors[8][0],
  colors[9][0],
  colors[10][0]
];

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ["CEO, President, Chairman of the Board", "Chief Information Officer, Chief Data Officer, Chief Technology Officer, Chief Architect", "Chief Financial Officer, Chief Operations Officer, Chief Procurement Officer", "Chief Marketing Officer, Chief Commercial Officer, Chief Revenue Officer", "Chief Risk Officer, Chief Compliance Officer, Chief Legal Council", "Other C-Level Titles (Chief Innovation Officer, Chief Strategy Officer, Chief Admin Officer"],
    datasets: [{
      data: [37, 17, 16, 13, 10, 7],
      borderWidth: 2,
      hoverBorderWidth: 10,
      backgroundColor: pieColors,
      hoverBackgroundColor: pieColors,
      hoverBorderColor: pieColors,
      borderColor: pieColors
    }]
  },

});

Answer 1

Chartjs提供了一个函数来生成一个名为generateLegend()的基本html图例[更多可以在关于它http://www.chartjs.org/docs/latest/configuration/legend.html]的文档中找到，这将带来html图例的唯一内容是图例颜色为这个项目。对于字体和其他样式，您必须使用css创建。或者，您可以使用图表中的数据覆盖该功能并创建自己的自定义html图例。

示例：

Chart.defaults.global.defaultFontFamily = "'Open Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif";
Chart.defaults.global.defaultFontSize = 14;
Chart.defaults.global.legend.position = 'bottom';
Chart.defaults.global.legend.labels.usePointStyle = true;
Chart.defaults.global.legend.labels.boxWidth = 15;
Chart.defaults.global.legend.labels.padding = 10;
Chart.defaults.global.tooltips.backgroundColor = '#000';

var colors = [
  ['rgba(120, 199, 221, 1)', 'rgba(120, 199, 221, 0.4)'],
  ['rgba(125, 169, 210, 1)', 'rgba(125, 169, 210, 0.4)'],
  ['rgba(162, 108, 136, 1)', 'rgba(162, 108, 136, 0.4)'],
  ['rgba(237, 180, 133, 1)', 'rgba(237, 180, 133, 0.4)'],
  ['rgba(129, 151, 92, 1)', 'rgba(129, 151, 92, 0.4)'],
  ['rgba(99, 122, 152, 1)', 'rgba(99, 122, 152, 0.4)'],
  ['rgba(187, 156, 200, 1)', 'rgba(187, 156, 200, 0.4)'],
  ['rgba(249, 185, 170, 1)', 'rgba(249, 185, 170, 0.4)'],
  ['rgba(162, 76, 80, 1)', 'rgba(162, 76, 80, 0.4)'],
  ['rgba(199, 123, 74, 1)', 'rgba(199, 123, 74, 0.4)'],
  ['rgba(200, 139, 35, 1)', 'rgba(200, 139, 35, 0.4)']
];

var pieColors = [
  colors[0][0],
  colors[1][0],
  colors[2][0],
  colors[3][0],
  colors[4][0],
  colors[5][0],
  colors[6][0],
  colors[7][0],
  colors[8][0],
  colors[9][0],
  colors[10][0]
];

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ["CEO, President, Chairman of the Board", "Chief Information Officer, Chief Data Officer, Chief Technology Officer, Chief Architect", "Chief Financial Officer, Chief Operations Officer, Chief Procurement Officer", "Chief Marketing Officer, Chief Commercial Officer, Chief Revenue Officer", "Chief Risk Officer, Chief Compliance Officer, Chief Legal Council", "Other C-Level Titles (Chief Innovation Officer, Chief Strategy Officer, Chief Admin Officer"],
    datasets: [{
      data: [37, 17, 16, 13, 10, 7],
      borderWidth: 2,
      hoverBorderWidth: 10,
      backgroundColor: pieColors,
      hoverBackgroundColor: pieColors,
      hoverBorderColor: pieColors,
      borderColor: pieColors
    }]
  },
  options: {
    legend: {
      display: false
    }
  },

});


var legendDiv = document.getElementById('legend');
legendDiv.innerHTML = (myChart.generateLegend());

#legend ul {
  list-style: none;
}

#legend li span {
  width: 10px;
  height: 10px;
  display: inline-block;
  margin-right: 10px;
  border-radius: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<div style="width:75%;">
  <canvas id="myChart"></canvas>
</div>
<div id="legend"></div>

我如何使用全局参数打印出HTML Chart.Js Legends

1 个答案: