Question

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

我想拥有汽车名称之上的价值。另外我不喜欢粘性传说我想将它与甜甜圈分开，所以我可以改变字体，盒子的样式（例如“奥迪”旁边的文字）

我知道有一些Legend generator但我不确定如何将它与VueJS一起使用 - 因为我使用VueJS作为框架

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

我的代码：

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

<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：

    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
      }
    })
  }
});

Answer 1

我在尝试理解文档时遇到同样的问题，这个链接可能会澄清自定义图例的过程：

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

诀窍是跟踪回调以构建您自己的HTML结构并将此新结构返回给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：

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

之后，如果需要，请追踪事件：

$("#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自定义它，检查另一个链接：

http://jsfiddle.net/vrwjfg9z/

希望它适合你。

Answer 2

您可以提取图例标记。

data () {
  return {
     legendMarkup: ''
  }
},
ready () {
  this.legendMarkup = this._chart.generateLegend()
 }

在您的模板中，您可以输出它。

<div class="legend" ref="legend" v-html="legendMarkup"></div>

this._chart是vue-chartjs中的内部chartjs实例。因此，您可以调用vue-chartjs api未公开的所有chartjs方法。

但是，您也可以使用图例生成器。用法在vue中是相同的。您可以传递选项，使用回调等。

Answer 3

请检查此documentation

图例配置

图表图例显示有关图表上显示区域的数据集的数据。

配置选项传奇的位置。选项包括：

'顶部' '剩下' '底部' '正确的'

图例项目界面

传递给图例onClick函数的项是从labels.generateLabels返回的项。这些项必须实现以下界面。

{
    // Label that will be displayed
    text: String,

    // Fill style of the legend box
    fillStyle: Color,

    // If true, this item represents a hidden dataset. Label will be rendered with a strike-through effect
    hidden: Boolean,

    // For box border. See https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/lineCap
    lineCap: String,

    // For box border. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash
    lineDash: Array[Number],

    // For box border. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset
    lineDashOffset: Number,

    // For box border. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin
    lineJoin: String,

    // Width of box border
    lineWidth: Number,

    // Stroke style of the legend box
    strokeStyle: Color

    // Point style of the legend box (only used if usePointStyle is true)
    pointStyle: String
}

实施例

以下示例将创建启用了图例的图表，并将所有文本设置为红色。

var chart = new Chart（ctx，{ 类型：'bar'，数据：数据，选项：{ 传说：{ 显示：true，标签： { fontColor：'rgb（255,99,132）' } } } }）; 自定义点击操作

单击图例中的项目时，通常需要触发不同的行为。这可以通过配置对象中的回调轻松实现。

默认图例点击处理程序为：

function(e, legendItem) {
    var index = legendItem.datasetIndex;
    var ci = this.chart;
    var meta = ci.getDatasetMeta(index);

    // See controller.isDatasetVisible comment
    meta.hidden = meta.hidden === null? !ci.data.datasets[index].hidden : null;

    // We hid a dataset ... rerender the chart
    ci.update();
}
Lets say we wanted instead to link the display of the first two datasets. We could change the click handler accordingly.

var defaultLegendClickHandler = Chart.defaults.global.legend.onClick;
var newLegendClickHandler = function (e, legendItem) {
    var index = legendItem.datasetIndex;

    if (index > 1) {
        // Do the original logic
        defaultLegendClickHandler(e, legendItem);
    } else {
        let ci = this.chart;
        [ci.getDatasetMeta(0),
         ci.getDatasetMeta(1)].forEach(function(meta) {
            meta.hidden = meta.hidden === null? !ci.data.datasets[index].hidden : null;
        });
        ci.update();
    }
};

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        legend: {

        }
    }
});

现在，当您单击此图表中的图例时，前两个数据集的可见性将链接在一起。

HTML Legends

有时你需要一个非常复杂的传奇。在这些情况下，生成HTML图例是有意义的。图表在其原型上提供了generateLegend（）方法，该方法返回图例的HTML字符串。

要配置此图例的生成方式，您可以更改legendCallback配置属性。

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        legendCallback: function(chart) {
            // Return the HTML string here.
        }
    }
});

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

3 个答案: