如何在 ChartJS 中创建自定义图例

问题描述

我需要使用 ChartJS 库为我的圆环图创建自定义图例.我已经使用 ChartJS 提供的默认图例创建了甜甜圈，但我需要进行一些修改.

I need to create custom legend for my donut chart using ChartJS library. I have created donut with default legend provided by ChartJS but I need some modification.

我想拥有高于汽车名称的价值.另外我不喜欢粘性图例，我想将它与甜甜圈分开，这样我就可以更改字体、框的样式(例如，在文本Audi"旁边)

I would like to have value above the car name. Also I don't like sticky legend I want to have it separate from donut so I can change the style for fonts, boxes (next to the text "Audi" for example)

我知道有一些 图例生成器但我不确定如何将它与 VueJS 一起使用 - 因为我使用 VueJS 作为框架

I know there is some Legend generator but I'm not sure how to use it with VueJS - because I'm using VueJS as a framework

这就是我的传奇现在的样子 - http://imgur.com/a/NPUoi

This is how my legend looks like now - http://imgur.com/a/NPUoi

我的代码:

从我导入甜甜圈组件的 Vue 组件:

From Vue component where I import a donut component:

<div class="col-md-6">
  <div class="chart-box">
    <p class="chart-title">Cars</p>
    <donut-message id="chart-parent"></donut-message>
  </div>
</div>

Javascript:

Javascript:

    import { Doughnut } from 'vue-chartjs'
    export default Doughnut.extend({

    ready () {


    Chart.defaults.global.tooltips.enabled = false;
    Chart.defaults.global.legend.display = false;

    this.render({
      labels: ['Audi','BMW','Ford','Opel'],
      datasets: [
        {
          label: 'Cars',
          backgroundColor: ['#35d89b','#4676ea','#fba545','#e6ebfd'],
          data: [40, 30, 20, 10]
        }
      ]
    }, 
    {
      responsive: true,
      cutoutPercentage: 75,
      legend: {
        display: true,
        position: "right",
        fullWidth: true,
        labels: {
          boxWidth: 10,
          fontSize: 14
        }
      },
      animation: {
        animateScale: true
      }
    })
  }
});

推荐答案

我在尝试理解文档时遇到了同样的问题，此链接可能会阐明自定义图例的过程:

I'm having the same problem trying to understand the documentation and this link might clarify the process of customize the legends:

https://codepen.io/michiel-nuovo/pen/RRaRRv

诀窍是跟踪回调以构建您自己的 HTML 结构并将这个新结构返回给 ChartJS.

The trick is to track a callback to build your own HTML structure and return this new structure to ChartJS.

选项对象内部:

legendCallback: function(chart) {
  var text = [];
  text.push('<ul class="' + chart.id + '-legend">');
  for (var i = 0; i < chart.data.datasets[0].data.length; i++) {
    text.push('<li><span style="background-color:' + 
    chart.data.datasets[0].backgroundColor[i] + '">');
      if (chart.data.labels[i]) {
      text.push(chart.data.labels[i]);
    }
    text.push('</span></li>');
  }
  text.push('</ul>');
  return text.join("");
}

其次，您需要一个容器来插入新的 html，并使用方法 myChart.generateLegend() 来获取自定义的 html:

Second, you need a container to insert the new html and using the method myChart.generateLegend() to get the customized html:

$("#your-legend-container").html(myChart.generateLegend());

之后，如果需要，追踪事件:

After that, if you need, track down the events:

$("#your-legend-container").on('click', "li", function() {
  myChart.data.datasets[0].data[$(this).index()] += 50;
  myChart.update();
  console.log('legend: ' + data.datasets[0].data[$(this).index()]);
});

$('#myChart').on('click', function(evt) {
  var activePoints = myChart.getElementsAtEvent(evt);
  var firstPoint = activePoints[0];
  if (firstPoint !== undefined) {
    console.log('canvas: ' + 
    data.datasets[firstPoint._datasetIndex].data[firstPoint._index]);
  } 
  else {
    myChart.data.labels.push("New");
    myChart.data.datasets[0].data.push(100);
    myChart.data.datasets[0].backgroundColor.push("red");
    myChart.options.animation.animateRotate = false;
    myChart.options.animation.animateScale = false;
    myChart.update();
    $("#your-legend-container").html(myChart.generateLegend());
  }
}

我找到的另一个解决方案，如果您不需要更改图例中的 HTMl 结构，您可以在您的图例容器中插入相同的 HTML 并通过 CSS 对其进行自定义，请查看另一个链接:

Another solution that I found, if you don't need to change the HTMl structure inside the legend, you can just insert the same HTML in your legend container and customize it by CSS, check this another link:

http://jsfiddle.net/vrwjfg9z/

希望它对你有用.

这篇关于如何在 ChartJS 中创建自定义图例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！