Question

我正在尝试在图表底部显示多个x轴。我开始添加带有layout.xaxis.position的轴来显示它们堆叠但是它们开始越过图表。然后我将layout.margin.pad设置为50，我得到了我想要的第一个轴的结果。

有没有办法为剩下的那些做到这一点？或者这是一个错误吗？

<template>
  <div id="cat-list-table">
    <div class="page-heading">List of Pets</div>
    <transition name="fade1" appear="">
      <div class="divTable">
        <div class="divTableHeading">
          <div class="divTableRow">
            <div class="divTableHead col-sm-1">&nbsp</div>
            <div class="divTableHead col-sm-2">Name</div>
            <div class="divTableHead col-sm-2">gender</div>
            <div class="divTableHead col-sm-2">&nbsp</div>
            <div class="divTableHead col-sm-4">Date Added</div>
          </div>
        </div>
        <transition-group tag="div" name="fade2" class="divTableBody" appear="">
          <div class="divTableRow fadecontent" v-for="cat in cats" :key="cat.id">
            <div class="divTableCell image"><img v-bind:src="cat.photo" width="40px" height="40px" alt=""></div>
            <div class="divTableCell"><router-link :to="{path:'/cat/' + cat.id}" >{{ cat.name }}</router-link></div>
            <div class="divTableCell">{{ cat.gender }}</div>
            <div class="divTableCell"></div>
            <div class="divTableCell">{{ cat.created | moment("MM-DD-YYYY h:MM a")}}</div>
          </div>
        </transition-group>
      </div>
    </transition>
  </div>
</template>

<script>
  import axios from 'axios';
  import { Observable } from 'rxjs';

  export default {
    name: 'CatList',
    data() {
      return {
        cats: [],
        page: 1,
        CatIndex: 0,
      }
    },
    mounted(){},
    subscriptions() {
      const cats$ = Observable.from(axios.get(`${process.env.KITTY_URL}/api/v1/cats/`)
        .catch(error => console.log(error)))
        .pluck("data","results");
      return{cats: cats$}
    },
  }
</script>
<style>...</style> (style sheet stuff removed for brevity)

图表图像与疯狂的油漆技能。

Codepen example here

Answer 1

我检查了您的codepen，问题很简单，position无法设置为negative值，因此您可以向上移动轴，但现在可以向下移动。我有两个解决方案，它涉及使用ticklength定位轴，作为一种黑客攻击，请参考下面的示例，实现它并让我知道您的问题是否已解决！

var data = JSON.parse('[{"name":"Atual","x":["May 28","May 29","May 30","May 31","Jun 01","Jun 02","Jun 03"],"y":[115.4,122.4,102.3,105.1,28.9,29.6,114.2]},{"name":"Atual-1","xaxis":"x2","x":["Jun 04","Jun 05","Jun 06","Jun 07","Jun 08","Jun 09","Jun 10"],"y":[69.6,71.1,78.9,72.5,24.5,25.2,69.2]},{"name":"Atual-2","xaxis":"x3","x":["Jun 11","Jun 12"],"y":[0.08,0]},{"name":"Atual 77777","xaxis":"x3","x":["Jun 11","Jun 12"],"y":[109.9,2.9]},{"name":"Atual-3","xaxis":"x4","x":["Jun 11","Jun 12"],"y":[8.6,0.2]},{"name":"Atual 2","xaxis":"x4","x":["Jun 11","Jun 12"],"y":[0.06,0]}]');

var layout = {
  xaxis: {
    fixedrange: true,
    autoexpand: false,
    visible: false
  },
  xaxis2: {
    fixedrange: true,
    domain: [0,1],
    anchor: 'free',
    overlaying: 'x',
    position: 0.1,
    layer: "below traces",
    ticklen: 30,
    tickwidth: 1,
    ticks: "outside",
    gridcolor: "#000000"
  },
  xaxis3: {
    fixedrange: true,
    domain: [0,1],
    anchor: 'free',
    overlaying: 'x',
    position: 0.2,
    layer: "below traces",
    ticklen: 30,
    tickwidth: 1,
    ticks: "outside",
    gridcolor: "#000000"
  },
  xaxis4: {
    fixedrange: true,
    domain: [0,1],
    anchor: 'free',
    overlaying: 'x',
    position: 0,
    layer: "below traces",
    ticklen: 30,
    tickwidth: 1,
    ticks: "outside",
    gridcolor: "#000000"
  },
  yaxis: {
    fixedrange: true,
    zeroline: false,
    rangemode: 'tozero'
  },
  showlegend: false,
  autosize: false,
  width: 450,
  height: 220,
  margin: {
    l: 30,
    r: 0,
    b: 70,
    t: 0,
    pad: 0
  }
};

var layout2 = {
  xaxis: {
    fixedrange: true,
    autoexpand: false,
    visible: false
  },
  xaxis2: {
    fixedrange: true,
    domain: [0,1],
    anchor: 'free',
    overlaying: 'x',
    position: 0.1,
    layer: "below traces",
    ticklen: 30,
    tickwidth: 1,
    ticks: "outside",
    tickcolor: "#eee"
  },
  xaxis3: {
    fixedrange: true,
    domain: [0,1],
    anchor: 'free',
    overlaying: 'x',
    position: 0.2,
    layer: "below traces",
    ticklen: 30,
    tickwidth: 1,
    ticks: "outside",
    tickcolor: "#eee"
  },
  xaxis4: {
    fixedrange: true,
    domain: [0,1],
    anchor: 'free',
    overlaying: 'x',
    position: 0,
    layer: "below traces",
    ticklen: 30,
    tickwidth: 1,
    ticks: "outside",
    tickcolor: "#eee"
  },
  yaxis: {
    fixedrange: true,
    zeroline: false,
    rangemode: 'tozero'
  },
  showlegend: false,
  autosize: false,
  width: 450,
  height: 220,
  margin: {
    l: 30,
    r: 0,
    b: 70,
    t: 0,
    pad: 0
  }
};

Plotly.newPlot('myDiv', data, layout, {displayModeBar: false, showTips: false, staticPlot: false});

Plotly.newPlot('myDiv2', data, layout2, {displayModeBar: false, showTips: false, staticPlot: false});

<script src="https://cdn.plot.ly/plotly-latest.js"></script>
<div id="myDiv" style="width: 480px; height: 400px;">
<div id="myDiv2" style="width: 480px; height: 400px;">

图表底部有多个x轴

1 个答案: