使用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>