Question

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

现在的图表

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

但是我需要标记响应区域，像这样：

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

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

====我的代码（在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; ?>
            }

////////////////////////////////数组数据

编辑图

        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:
            }

谢谢。

Answer 1

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

看看这个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样式。

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

1 个答案: