Question

我使用 vue chart js 和 chart js 2.9.4 插件并创建了 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> <li v-for="(data, index) in deliveriesChartDatasets" style="display:inline"> 样式，将图表呈现在自己的行上。

HorizontalBarChart

此外，display:inline-block 上需要一个 styles binding 来设置其 width 和 <HorizontalBarChart :styles="barStyles">：

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

=date(year(today()), match(B59,{"JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP","OCT", "NOV", "DEC"},0),1)

demo

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

1 个答案: