如何在ChartJS中创建自定义图例 [英] How to create custom legend in ChartJS

查看:494
本文介绍了如何在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.

我希望价值高于汽车名称。另外我不喜欢粘性传说我想将它与甜甜圈分开,所以我可以改变字体,盒子的样式(例如文本奥迪旁边)

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中创建自定义图例的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆