时间戳

首页 > 解决方案 > Chart.js - 如何使用 JavaScript 在图表标签中添加文本？

javascript - Chart.js - 如何使用 JavaScript 在图表标签中添加文本？

问题描述

我不知道如何在 Chart JavaScript 的标签中添加文本。我的图表在 PC 和平板电脑上使用。

现在图表

https://i.stack.imgur.com/9BanV.png

但我需要标记响应区域，如下所示：

https://i.stack.imgur.com/uhIp9.png

https://i.stack.imgur.com/WyDnW.png

<canvas id="myChart" width="500" height="400"></canvas>

==== 我的代码（在 1 个标签数据中 12 个月 - 10 年 = 1 x 条）

var color = Chart.helpers.color;
var barChartData = {

    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    datasets: [{
        type: 'bar',
        label: '<?php echo $year9+543; ?>',
        fill: false,
        borderColor: "rgba(235,189,139,1)",
        data: <? php echo $data_target9_month; ?>
    }, ... Array data ...

编辑图表

window.onload = function () {
    var ctx = document.getElementById('canvas').getContext('2d');
    window.myBar = new Chart(ctx, {
        type: 'bar',
        data: barChartData,
        options: {
            elements: {
                line: {
                    tension: 0
                }
            },
            tooltips: {
                mode: 'index',

                intersect: false,
                callbacks: {
                    label: function (tooltipItem, data) {
                        var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
                        if (parseInt(value) >= 1000) {
                            return data.datasets[tooltipItem.datasetIndex].label + " : " + '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                        }
                        if (parseInt(value) == 0) {
                            return data.datasets[tooltipItem.datasetIndex].label + " : " + 'ไม่มีข้อมูล';
                        }
                        else {
                            return data.datasets[tooltipItem.datasetIndex].label + " : " + '$' + value;
                        }

                    }
                } // end callbacks:
            }
        }
    })

谢谢。

标签： javascriptphpchart.js

解决方案

position: absolute;这肯定可以使用 Chart.JS 方法实现，但最好和最简单的方法是简单地在每个文本框中重叠您要添加的文本。

看看这个 JSFiddle：https ://jsfiddle.net/gxjw5hLb/

当然，您需要计算和替换每个“X”的值，

<td><span>X=1000</span></td>
<td><span>X=2500</span></td>
<td><span>X=3000</span></td>

盒子还需要一些额外的 CSS 样式。

推荐阅读