使用 Chartjs 显示混合类型的图例（条形和线条）答案

【问题标题】：Displaying mixed types of legends (bar and lines) with Chartjs使用 Chartjs 显示混合类型的图例（条形和线条）
【发布时间】：2018-03-06 15:08:24
【问题描述】：

我使用Chartjs 与线数据集混合制作了一个堆叠组条形图：

我想通过将第一项 Productivité 渲染为一条线（而不是显示为矩形）来区分第一项的图例。

我浏览了legend documentation，但找不到我想要的东西。

【问题讨论】：

标签： chart.js

【解决方案1】：

我认为唯一的方法是自定义图例（参见http://www.chartjs.org/docs/latest/configuration/legend.html#html-legends）。

下面是一个例子：

var ctx = document.getElementById('myChart');
var config = {
	type: 'bar',
  options: {
    legendCallback: function(chart) {
      var text = [];
      text.push('<ul class="' + chart.id + '-legend">');
      var data = chart.data;
      var datasets = data.datasets;
      if (datasets.length) {
        for (var i = 0; i < datasets.length; ++i) {
        	text.push('<li>');
        	if (datasets[i].type=='line') {
          	text.push('<span class="'+datasets[i].type+'" style="background-color:' + datasets[i].backgroundColor + '"></span>');
          } else {
          	text.push('<span class="'+datasets[i].type+'" style="background-color:' + datasets[i].backgroundColor + '"></span>');
          }
          text.push(datasets[i].label);
          text.push('</li>');
        }
      }
      text.push('</ul>');
      return text.join('');
    },
    legend: {
      display: false,
    },
    scales: {
      xAxes: [{
        type: "category",
        id: "axis-bar",
      }, {
        type: "time",
        id: "axis-time",
        display: false,
      }, ],
    },
  },
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [{
      label: "my dataset 1",
      type: "line",
      backgroundColor: "#0000FF",
      borderColor: "#0000FF",
      borderWidth: 1,
      fill: false,
      xAxisID: "axis-time",
      data: [{x:1*3600,y:2124},{x:1.5*3600,y:12124},{x:2*3600,y:1636},{x:2.5*3600,y:11636},{x:3*3600,y:1057},{x:3.5*3600,y:11057},{x:4*3600,y:9433},{x:4.5*3600,y:19433},{x:5*3600,y:4512},{x:5.5*3600,y:4512},{x:6*3600,y:3581},{x:6.5*3600,y:3581},{x:7*3600,y:53},{x:7.5*3600,y:53},]
    },{
      label: "my dataset 2",
      type: "bar",
      backgroundColor: "#ff0000",
      borderColor: "#ff0000",
      borderWidth: 1,
      fill: true,
      xAxisID: "axis-bar",
      data: [21242, 16360, 10577, 94337, 45312, 35581, 53]
    }]
  },

};

var myChart = new Chart(ctx, config);
var legend = myChart.generateLegend();
document.getElementById("legend").innerHTML = legend;

body {
  font-family: 'Arial';
}

.container {
  margin: 15px auto;
}

#chart {
  float: left;
  width: 70%;
}

#legend {
  float: right;
}

[class$="-legend"] {
  list-style: none;
  cursor: pointer;
  padding-left: 0;
}

[class$="-legend"] li {
  display: block;
  padding: 0 5px;
}

[class$="-legend"] li.hidden {
  text-decoration: line-through;
}

[class$="-legend"] li span {
  display: inline-block;
  margin-right: 10px;
  width: 20px;
}

[class$="-legend"] li span.bar {
  height: 10px;
}

[class$="-legend"] li span.line {
  height: 1px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
<div id="legend"></div>
<canvas id="myChart" width="400" height="200"></canvas>

或这里的 jsfiddle：https://jsfiddle.net/beaver71/g7oz0noe/

P.S.：如果您还需要图例点击处理程序，您可以轻松添加它们，请参阅此小提琴的示例：https://jsfiddle.net/beaver71/b5hdn9gw/

【讨论】：

刚刚实现了您的代码，并且运行良好。小提琴也很有帮助。

【解决方案2】：

在图表数据对象中将 pointStyle 设置为您想要的任何内容，例如线条、矩形等

 pointStyle: 'rect'

并在选项中添加以下行

  legend: {
           labels: {
                    usePointStyle: true
                   }
           }

【讨论】：