多个水平条形图显示在同一行

Question

我正在使用带有图表 js 2.9.4 插件的 vue 图表 js，并创建了 4 个水平条字符。它们目前都在不同的行中一个接一个地显示。我怎样才能将它们全部显示在同一行中。

    <ul v-for="(data, index) in deliveriesChartDatasets" style="display:inline">
      <li>
      <HorizontalBarChart
        :datasets="data"
        :show-legend="true"
      />
      </li>
    </ul>

如上所示，如果我渲染它，它将按行显示 4 个图表。但我需要在同一行中显示所有 4 个图表。有什么办法可以改变图表的宽度或做些什么吗？

Answer 1

v-for 和 style="display:inline" 应该在 <li> 上，而不是 <ul>。否则，每个图表将以其自己的 <ul> 呈现，它具有默认的 display:block 样式，在它们自己的行上呈现图表。

<!--
<ul v-for="(data, index) in deliveriesChartDatasets" style="display:inline">
  <li>
-->

<ul>
  <li v-for="(data, index) in deliveriesChartDatasets" style="display:inline">

此外，HorizontalBarChart 上需要一个 styles binding 来设置它的 display:inline-block 和 width:

<HorizontalBarChart :styles="barStyles">

export default {
  data() {
    return {
      barStyles: {
        width: '200px',
        position: 'relative',
        display: 'inline-block',
      }
    }
  }
}

demo

多个水平条形图显示在同一行

multiple horizontal bar charts to display in same row

vue.js

chart.js

vue-chartjs