vue.js - 使用 chartJs 在 yAxis 中标记太长

Question

我在使用模块“chartjs”和“vuejs”时遇到 Y 轴上的标签太长的问题。我张贴了一张图片来说明问题:

我的代码:

<bar-chart
  :max="100"
  :xlabels="50"
  suffix="%"
  :dataset="{hoverBorderWidth: 10}"
  v-if="charts=='bar'"
  :data="data.percentsData"
  :colors="['#01E3AD']"
  :style="calcHeight(data.percentsData.length)"
  :download="survey_name + ' - ' +data.title"
  >
</bar-chart>

Answer 1

您可以将字符串分成多行。这是通过将字符串拆分为数组来完成的。 Chart.js 将每个数组元素解析为一行。

例子:

let labels = [
    ['this is a very long label', 'broken across two lines'],
    'short label'
  ],
  myBarChart = new Chart(document.getElementById('chart'), {
    type: 'horizontalBar',
    data: {
      labels: labels,
      datasets: [{
        label: 'Series1',
        data: [1, 1]
      }]
    },
    options: {
      maintainAspectRatio: false
    }
  });

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<canvas id="chart"></canvas>