Question

我想问一下是否可以使用Chart.js 来显示数据值？我想打印图表。

感谢您的任何建议。

Answer 1

延迟修改：Chart.js 2.7.0+有一个官方插件可以执行此操作：https://github.com/chartjs/chartjs-plugin-datalabels

原始回答：

您可以遍历onAnimationComplete上的点/条并显示值

预览

<强> HTML

<canvas id="myChart1" height="300" width="500"></canvas> <canvas id="myChart2" height="300" width="500"></canvas>

<强>脚本

var chartData = { labels: ["January", "February", "March", "April", "May", "June"], datasets: [ { fillColor: "#79D1CF", strokeColor: "#79D1CF", data: [60, 80, 81, 56, 55, 40] } ] }; var ctx = document.getElementById("myChart1").getContext("2d"); var myLine = new Chart(ctx).Line(chartData, { showTooltips: false, onAnimationComplete: function () { var ctx = this.chart.ctx; ctx.font = this.scale.font; ctx.fillStyle = this.scale.textColor ctx.textAlign = "center"; ctx.textBaseline = "bottom"; this.datasets.forEach(function (dataset) { dataset.points.forEach(function (points) { ctx.fillText(points.value, points.x, points.y - 10); }); }) } }); var ctx = document.getElementById("myChart2").getContext("2d"); var myBar = new Chart(ctx).Bar(chartData, { showTooltips: false, onAnimationComplete: function () { var ctx = this.chart.ctx; ctx.font = this.scale.font; ctx.fillStyle = this.scale.textColor ctx.textAlign = "center"; ctx.textBaseline = "bottom"; this.datasets.forEach(function (dataset) { dataset.bars.forEach(function (bar) { ctx.fillText(bar.value, bar.x, bar.y - 5); }); }) } });

小提琴 - http://jsfiddle.net/uh9vw0ao/

Answer 2

这是Chart.js 2.3的更新版本

2016年9月23日：编辑我的代码以使用v2.3进行线/条类型。

重要事项：即使您不需要动画，也不要将duration选项更改为0，否则您将获得 chartInstance.controller未定义错误。

var chartData = {
    labels: ["January", "February", "March", "April", "May", "June"],
        datasets: [
            {
                fillColor: "#79D1CF",
                strokeColor: "#79D1CF",
                data: [60, 80, 81, 56, 55, 40]
            }
        ]
    };

var opt = {
    events: false,
    tooltips: {
        enabled: false
    },
    hover: {
        animationDuration: 0
    },
    animation: {
        duration: 1,
        onComplete: function () {
            var chartInstance = this.chart,
                ctx = chartInstance.ctx;
            ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
            ctx.textAlign = 'center';
            ctx.textBaseline = 'bottom';

            this.data.datasets.forEach(function (dataset, i) {
                var meta = chartInstance.controller.getDatasetMeta(i);
                meta.data.forEach(function (bar, index) {
                    var data = dataset.data[index];                            
                    ctx.fillText(data, bar._model.x, bar._model.y - 5);
                });
            });
        }
    }
};
 var ctx = document.getElementById("Chart1"),
     myLineChart = new Chart(ctx, {
        type: 'bar',
        data: chartData,
        options: opt
     });

<canvas id="myChart1" height="300" width="500"></canvas>

Answer 3

此动画选项适用于条形图上的2.1.3。

略微修改@Ross回答

animation: {
duration: 0,
onComplete: function () {
    // render the value of the chart above the bar
    var ctx = this.chart.ctx;
    ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, 'normal', Chart.defaults.global.defaultFontFamily);
    ctx.fillStyle = this.chart.config.options.defaultFontColor;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    this.data.datasets.forEach(function (dataset) {
        for (var i = 0; i < dataset.data.length; i++) {
            var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
            ctx.fillText(dataset.data[i], model.x, model.y - 5);
        }
    });
}}

Answer 4

基于@ Ross的Chart.js 2.0及以上的答案答案，我不得不加入一些调整来防止这种情况发生，当酒吧的高度过于选择到规模边界时。< / p>

条形图选项的XYPlot属性：

JFreeChart

Answer 5

我认为在chartJS v2.x中执行此操作的最佳选择是使用插件，因此您在选项中没有大块代码。此外，它可以防止数据悬停在条形图上时消失。

即。只需使用此代码，该代码注册一个插件，该插件在绘制图表后添加文本。

Chart.pluginService.register({
    afterDraw: function(chartInstance) {
        var ctx = chartInstance.chart.ctx;

        // render the value of the chart above the bar
        ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, 'normal', Chart.defaults.global.defaultFontFamily);
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';

        chartInstance.data.datasets.forEach(function (dataset) {
            for (var i = 0; i < dataset.data.length; i++) {
                var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
                ctx.fillText(dataset.data[i], model.x, model.y - 2);
            }
        });
  }
});

Answer 6

如果您使用的是插件chartjs-plugin-datalabels，则以下代码选项对象将有所帮助

确保在打字稿文件中导入newElement或在javascript文件中添加对import 'chartjs-plugin-datalabels';的引用。

<script src="chartjs-plugin-datalabels.js"></script>

Answer 7

在good answer之后，我将这些选项用于条形图：

var chartOptions = {
    animation: false,
    responsive : true,
    tooltipTemplate: "<%= value %>",
    tooltipFillColor: "rgba(0,0,0,0)",
    tooltipFontColor: "#444",
    tooltipEvents: [],
    tooltipCaretSize: 0,
    onAnimationComplete: function()
    {
        this.showTooltip(this.datasets[0].bars, true);
    }
};

window.myBar = new Chart(ctx1).Bar(chartData, chartOptions);

这仍然使用工具提示系统和他的优点（自动定位，模板，......）但隐藏装饰（背景颜色，插入符号......）

Answer 8

来自chart.js样本（文件Chart.js-2.4.0 / samples / data_labelling.html）：

``` //定义一个插件来提供数据标签

    Chart.plugins.register({
        afterDatasetsDraw: function(chartInstance, easing) {
            // To only draw at the end of animation, check for easing === 1
            var ctx = chartInstance.chart.ctx;

            chartInstance.data.datasets.forEach(function (dataset, i) {
                var meta = chartInstance.getDatasetMeta(i);
                if (!meta.hidden) {
                    meta.data.forEach(function(element, index) {
                        // Draw the text in black, with the specified font
                        ctx.fillStyle = 'rgb(0, 0, 0)';

                        var fontSize = 16;
                        var fontStyle = 'normal';
                        var fontFamily = 'Helvetica Neue';
                        ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);

                        // Just naively convert to string for now
                        var dataString = dataset.data[index].toString();

                        // Make sure alignment settings are correct
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'middle';

                        var padding = 5;
                        var position = element.tooltipPosition();
                        ctx.fillText(dataString, position.x, position.y - (fontSize / 2) - padding);
                    });
                }
            });
        }
    });

```

Answer 9

我建议使用此插件：https://github.com/chartjs/chartjs-plugin-datalabels

只需将插件导入js文件即可将标签添加到图表中，例如：

import 'chartjs-plugin-datalabels'

可以使用这些文档进行微调：https://chartjs-plugin-datalabels.netlify.com/options.html

Answer 10

编辑了@ ajhuddy的答案。 仅适用于条形图。我的版本补充说：

淡化动画的值。
如果条形图太高，则通过将值定位在条形内来防止剪裁。
没有眨眼。

下行：当鼠标悬停在其中有价值的条形图上时，该值可能看起来有点锯齿状。我还没有找到解决方案来禁用悬停效果。它可能还需要调整，具体取决于您自己的设置。

配置：

bar: {
  tooltips: {
    enabled: false
  },
  hover: {
    animationDuration: 0
  },
  animation: {
    onComplete: function() {
      this.chart.controller.draw();
      drawValue(this, 1);
    },
    onProgress: function(state) {
      var animation = state.animationObject;
      drawValue(this, animation.currentStep / animation.numSteps);
    }
  }
}

助手：

// Font color for values inside the bar
var insideFontColor = '255,255,255';
// Font color for values above the bar
var outsideFontColor = '0,0,0';
// How close to the top edge bar can be before the value is put inside it
var topThreshold = 20;

var modifyCtx = function(ctx) {
  ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, 'normal', Chart.defaults.global.defaultFontFamily);
  ctx.textAlign = 'center';
  ctx.textBaseline = 'bottom';
  return ctx;
};

var fadeIn = function(ctx, obj, x, y, black, step) {
  var ctx = modifyCtx(ctx);
  var alpha = 0;
  ctx.fillStyle = black ? 'rgba(' + outsideFontColor + ',' + step + ')' : 'rgba(' + insideFontColor + ',' + step + ')';
  ctx.fillText(obj, x, y);
};

var drawValue = function(context, step) {
  var ctx = context.chart.ctx;

  context.data.datasets.forEach(function (dataset) {
    for (var i = 0; i < dataset.data.length; i++) {
      var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
      var textY = (model.y > topThreshold) ? model.y - 3 : model.y + 20;
      fadeIn(ctx, dataset.data[i], model.x, textY, model.y > topThreshold, step);
    }
  });
};

Answer 11

根据我的经验，一旦您添加了chartjs-plugin-datalabels插件（确保将<script>标记放在页面上的chart.js标记之后），您的图表就会开始显示值。

如果您选择，则可以根据自己的需要进行自定义。 The customization is clearly documented here但基本上，格式就像这个假设的例子：

var myBarChart = new Chart(ctx, {
    type: 'bar',
    data: yourDataObject,
    options: {
        // other options
        plugins: {
            datalabels: {
                anchor :'end',
                align :'top',
                // and if you need to format how the value is displayed...
                formatter: function(value, context) {
                    return GetValueFormatted(value);
                }
            }
        }
    }
});

Answer 12

为了防止您的数字在离画布顶部太近时被截断：

yAxes: [{
    ticks: {
      stepSize: Math.round((1.05*(Math.max.apply(Math, myListOfyValues)) / 10)/5)*5,
      suggestedMax: 1.05*(Math.max.apply(Math, myListOfyValues)),
        beginAtZero: true,
        precision: 0
    }
}]

10 = 滴答数

5 = 将刻度值四舍五入到最接近的 5 - 所有 y 值将均匀递增

1.05 = 增加最大 y 轴刻度值，这样数字就不会被截断

类似的方法也适用于 xAxes。

如何在Chart.js上显示数据值

12 个答案: