Question

我正在使用Angular2和ng2-charts来创建折线图。但我正在尝试将数据标签置于该点之上，就像链接中图像上此条形图中的数据标签一样： bar chart

我找到了chart.js plugin for data labels，但我无法弄清楚如何在ng2-charts中使用它。

您可以在链接中看到一个关于我如何处理图表的简单示例：http：// plnkr.co/edit/GcuZd5A4J6TL29vAyTua?p=preview

任何人都可以帮助我吗？！

Answer 1

您可以构建一个插件来实现此功能。我现在有一个vue构建工作，但我尽可能地为你调整它。

模板

template: `
  <base-chart
    class="chart"
    [datasets]="datasets"
    [labels]="labels"
    [options]="options"
    [chartType]="'line'"
    [plugin]="dataLabelPlugin">
  </base-chart>
`

Js添加插件

private options = {
  scales: {
    yAxes: [{
      ticks: {
        beginAtZero: true
      }
    }]
  }
  plugins: [{
    afterDatasetsDraw: this.dataLabelPlugin
  }]
};

Js定义一个插件，在每个动画后绘制数字。您可能需要传入您正在修改的图表，具体取决于上下文。

private dataLabelPlugin = function(chart, easing) {
    // To only draw at the end of animation, check for easing === 1
    const ctx = chart.ctx;
    const fontSize = 12;
    const fontStyle = 'normal';
    const fontFamily = 'open sans';
    const padding = 5;

    chart.data.datasets.forEach((dataset, key) => {
        let meta = chart.getDatasetMeta(key);
        if (!meta.hidden) {
            meta.data.forEach((element, index) => {
                let position = element.tooltipPosition();
                // Just naively convert to string for now
                let dataString = dataset.data[index].toString();

                ctx.fillStyle = '#676a6c';

                ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);
                // Make sure alignment settings are correct
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                ctx.fillText(dataString, position.x, position.y - (fontSize / 2) - padding);
            });
        }
    });
};

如果你让这个工作让我知道，我可以做出改变，使这个答案更正确。

数据标签位于折线图中的点之上

1 个答案: