Question

只是想知道是否有任何方法可以使用chart.js为y轴设置水平条标签。以下是我设置图表的方法：

<div class="box-body">
<canvas id="chart" style="position: relative; height: 300px;"></canvas>
</div>

使用Javascript：

    var ctx = document.getElementById('chart').getContext("2d");
    var options = {
        layout: {
            padding: {
              top: 5,
            }
        },
        responsive: true,
        animation: {
            animateScale: true,
            animateRotate: true
        },
    };

    var opt = {
      type: "horizontalBar",
      data: { 
        labels: label, 
        datasets: [{ 
        data: price, 
        }] 
      }, 
      options: options
    };

    if (chart) chart.destroy();
    chart= new Chart(ctx, opt);

    chart.update();

正如大家所看到的，第一个和第三个标签太长而且被切断了。有没有办法让标签成为多行？

Answer 1

您可以使用以下图表插件：

  var uri = 'https://api.onedrive.com/v1.0/drive/root:/' + 'C:/files/file.zip' + ':/content'

  var options = {
      method: 'PUT',
      uri: uri,
      headers: {
        Authorization: "Bearer " + accesstoken
      },
      json: true
    };

request(options, function (err, res, body){

if (err) {
console.log('#4224 err:', err)
}
console.log('#4224 body:', body)

});

^{添加此项后跟您的图表选项}

ᴜꜱᴀɢᴇ：

在您想要添加换行符的位置添加新的换行符（plugins: [{ beforeInit: function(chart) { chart.data.labels.forEach(function(e, i, a) { if (/\n/.test(e)) { a[i] = e.split(/\n/); } }); } }]）。

<强>ᴅᴇᴍᴏ

\n

var chart = new Chart(ctx, {
   type: 'horizontalBar',
   data: {
      labels: ['Jan\n2017', 'Feb', 'Mar', 'Apr'],
      datasets: [{
         label: 'BAR',
         data: [1, 2, 3, 4],
         backgroundColor: 'rgba(0, 119, 290, 0.7)'
      }]
   },
   options: {
      scales: {
         xAxes: [{
            ticks: {
               beginAtZero: true
            }
         }]
      }
   },
   plugins: [{
      beforeInit: function(chart) {
         chart.data.labels.forEach(function(e, i, a) {
            if (/\n/.test(e)) {
               a[i] = e.split(/\n/);
            }
         });
      }
   }]
});

Answer 2

如果要完全控制跨行分解标签的时间，可以通过在嵌套数组中提供标签来指定断点。例如：

var chart = new Chart(ctx, {
...
  data: {
    labels: [["Label1 Line1:","Label1 Line2"],["Label2 Line1","Label2 Line2"]],
    datasets: [{
...
});

使Chart.js水平条标签多行

2 个答案: