javascript Chart.js -在水平条内写入标签？

bxgwgixi 于 2023-05-21 发布在 Java

关注(0)|答案(6)|浏览(267)

在Chart.js中，有没有办法在"horizontalBar"图表中的水平条内写入标签？就像这样：

在Chart.js中有类似的功能吗？
谢谢！

JavaScript

来源：https://stackoverflow.com/questions/38645829/chart-js-writing-labels-inside-of-horizontal-bars

6条答案

按热度按时间

pcww981p1#

现在有一个选项“镜像”，使标 checkout 现在酒吧内。

横条形图的选项配置示例：

options: {
    scales: {
        yAxes: [{ticks: {mirror: true}}]
    }
}

文档：http://www.chartjs.org/docs/latest/axes/cartesian/#common-configuration

赞(0）回复(0）举报 2023-05-21

bq9c1y662#

通过在animation的onComplete中使用HTML5 Canvas fillText()方法来参考original solution to displaying data value，下面的代码将为您提供所需的内容：
自定义显示任何图表相关数据的关键是检查图表的数据集，如下面的this.data.datasets所示。我通过检查不同的值在这个数据集中的位置以及为fillText方法放置它们的位置来做到这一点。
检查图表的数据集：Image

脚本（Chart.js 2.0及以上）：

var barOptions = {
      events: false,
        showTooltips: false,
      legend: {
        display: false
      },
      scales:{
        yAxes: [{
          display: false
        }]
      },
        animation: {
        onComplete: function () {
          var ctx = this.chart.ctx;
          ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
          ctx.textAlign = 'left';
          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,
                  left = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._xScale.left;
              ctx.fillStyle = '#444'; // label color
              var label = model.label;
              ctx.fillText(label, left + 15, model.y + 8);
            }
          });               
        }
        }
    };

jsFiddle：http://jsfiddle.net/jfvy12h9/

赞(0）回复(0）举报 2023-05-21

rkttyhzu3#

在chartjs 2.0 +中，你可以通过旋转标签90度并应用负填充来实现这个效果，这样标签就可以在“条”内向上移动。就像这样：

new Chart(document.getElementById(id), {
  type: 'bar',
  data: data,
  options: {
    scales: {
      xAxes: [
        {
          ticks: {
            autoSkip: false,
            maxRotation: 90,
            minRotation: 90,
            padding: -110
          }
        }
      ]
    }
  }
});

有关详细信息，请参阅tick配置文档。

赞(0）回复(0）举报 2023-05-21

ha5z0ras4#

现在似乎没有直接的选择。一个可能的实现是通过使用onAnimationComplete钩子迭代条/列。您可以查看此问题的详细说明how to display data values on Chart.js
我想提醒你这有一个缺点。由于它使用onAnimationComplete，因此每当图表上发生动画时，值将消失一秒钟并再次出现。

赞(0）回复(0）举报 2023-05-21

p3rjfoxz5#

因为在“条形图”上“镜像”选项不起作用…
我找到了一个解决方案：Fiddle link
我使用的是在this link中修改的chart.js 2.8.0版本

<html>
    <body>
        <canvas id="myChart" width="800" height="600">
        </canvas>
    </body>
</html>



var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
type: "bar",
data: {
labels: ["ONE", "TWO", "THREE", "FOUR", "FIVE", "SIX", "SEVEN", "EIGHT"],
datasets: [{
    label: "Quota Eni mensile",
    backgroundColor: [
        "rgba(255, 255, 153, 1)",
        "rgba(255, 255, 153, 1)",
        "rgba(255, 255, 153, 1)",
        "rgba(255, 255, 153, 1)",
        "rgba(255, 255, 153, 1)",
        "rgba(255, 255, 153, 1)",
        "rgba(255, 255, 153, 1)",
        "rgba(255, 255, 153, 1)"
    ],
    borderColor: [
        "rgba(255, 255, 153, 1)",
        "rgba(255, 255, 153, 1)",
        "rgba(255, 255, 153, 1)",
        "rgba(255, 255, 153, 1)",
        "rgba(255, 255, 153, 1)",
        "rgba(255, 255, 153, 1)",
        "rgba(255, 255, 153, 1)",
        "rgba(255, 255, 153, 1)"
    ],
    borderWidth: 1,
    data: [10, 11, 18, 10, 13, 28, 12, 16]
  }
  ]
},
options: {
    legend: {
        display: false
    },
    scales: {
        xAxes: [{
            ticks:{
                maxRotation: 90,
                minRotation: 90,
                display: "top"
             },          
         }],
         yAxes: [{
             display: false
         }]
     },
     tooltips: {
         enabled: true
     },
     maintainAspectRatio: true,
     responsive: true
 }

}）;

Chart.plugins.register({
/* Adjust axis labelling font size according to chart size */
  id: "responsiveXlabels",
  beforeDraw: function(c) {
      var chartHeight = c.chart.height;
      var size = (chartHeight * 2.5) / 100;
      var xAxis = c.scales["x-axis-0"];
      xAxis.options.ticks.minor.fontSize = size;
      xAxis.height = 10;
      xAxis.minSize.height = 10;
      c.options.scales.xAxes[0].ticks.padding = -size * 4.5;
      xAxis.margins.bottom = size * 12.5;
  },
  afterDraw: function(c) {
      c.options.scales.xAxes[0].ticks.padding = -158;
  }

}）;
responsiveXlabel插件用于在调整大小时转换文本。现在只剩下一件事要解决了在轴的底部对齐文本。
希望这对那些想在X轴上实现镜像并满足响应请求的人有所帮助。

赞(0）回复(0）举报 2023-05-21

swvgeqrz6#

在最新版本的chart.js（v3+）中，实现这一点的最佳方式似乎是通过datalabels插件
https://github.com/chartjs/chartjs-plugin-datalabels

plugins: [ChartDataLabels], // Register the plugin
options: {
    indexAxis: 'y', // Assume this is for a horizontal bar chart
    scales: {
        y: {
            display: false // Hide the standard labels
        }
    },
    plugins: {
        datalabels: {
            anchor: 'start', // Anchor the labels to the start of the datapoint
            align: 'end', // Align the text after the anchor point
            formatter: function(value, context) { // Show the label instead of the value
                return context.chart.data.labels[context.dataIndex];
            }
        }
    }
}

如果您使用的是堆叠条形图，则只需要通过将data.datasets[].datalabels.labels.display设置为false来隐藏除第一个数据集之外的所有数据集的标签。

赞(0）回复(0）举报 2023-05-21

我来回答

javascript Chart.js -在水平条内写入标签？

6条答案

相关问题

热门标签

最新问答