Chart.js - 在单杠内写入标签？

问题描述 投票：0回答：6

在 Chart.js 中，有没有办法在 

"horizontalBar"
图表中的水平条内部写入标签？就像这样：

this graph

Chart.js 中可能存在类似的情况吗？

谢谢！

javascript chart.js label
6个回答
35
投票

现在有选项“镜像”可以使标签出现在栏内。

水平条形图的“选项”配置示例：

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

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

10
投票

参考fillText()的

animation
中使用HTML5 Canvas 
onComplete
方法显示数据值
的原始解决方案，下面的代码将满足您的需求：

自定义显示任何图表相关数据的关键是检查图表的数据集，如下

this.data.datasets

所示。我通过检查不同值在此数据集中的位置以及 fillText 方法的放置位置来做到这一点。

检查图表的数据集：

图像

脚本（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/

4
投票
在最新版本的 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?.at(context.dataIndex); } } } } 
如果您使用的是堆叠条形图，则只需将 
data.datasets[].datalabels.labels.display
 设置为 
false
，即可隐藏除第一个数据集之外的所有数据集的这些标签。

    



    

    
    
    

    

        

            

                

                    
3
投票

                    
                

            

        

        
您可以在 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
投票

                    
                

            

        

        
目前似乎没有直接的选择。一种可能的实现是使用 onAnimationComplete 钩子迭代条形/列。您可以查看此问题以获取详细说明
如何在Chart.js上显示数据值


我想提醒您，这有一个缺点。由于它使用 onAnimationComplete，每当图表上发生动画时，值都会消失一秒钟然后再次出现。

    



    

    
    
    

    

        

            

                

                    
0
投票

                    
                

            

        

        
由于“条形”图表上的“镜像”选项不起作用...



我找到了一个解决方案： 

小提琴链接


我使用了在
此链接中修改的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轴上实现镜像并满足响应请求的人。

    

	

    

    


  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.