Question

在Chart.js中，有没有办法在"horizontalBar"图表中的水平条内写入标签？如下所示：

Chart.js中是否有类似的内容？

谢谢！

Answer 1

现在有选项“镜子”使标签出现在栏内。

horizontalBar图表的“options”配置示例：

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

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

Answer 2

在fillText()的{{1}}中使用HTML5 Canvas animation方法参考original solution to displaying data value，下面的代码将为您提供所需内容：

自定义显示任何图表相关数据的关键是检查图表的数据集，如下面的onComplete所示。我这样做是通过检查此数据集中不同值的位置，以及将它们放置在fillText方法中的位置。

检查图表的数据集：Image

脚本（Chart.js 2.0＆amp; up）：

this.data.datasets

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

Answer 3

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

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

有关详细信息，请参阅tick configuration documentation。

Answer 4

现在似乎没有直接的选择。可能的实现是使用onAnimationComplete钩子迭代条/列。您可以查看此问题以获取详细说明how to display data values on Chart.js

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

Answer 5

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

我找到了一种解决方法： 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;
  }

}）;

sensitiveXlabel插件用于在调整大小时转换文本。剩下的只有一件事要解决：在轴的底部对齐文本。

希望这有助于希望在X轴上实现镜像并满足响应请求的人。

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

5 个答案: