代码之家 › 专栏 › 技术社区 › prototype

在plotly.js中的条之间放置刻度线

plotly.js axis-labels plotly javascript

prototype · 技术社区 · 6 年前

在plotly.js中是否可以在条之间放置记号?在这里,我希望记号表示连续分布中的切点,而条形图表示间隔内的计数。另一种方法是使轴标签范围,例如“5-<10”、“10-<25”、“25-<50”等,但显示打断似乎更干净。

下面是画笔中显示所需效果的模型,这里我添加了勾号,并通过拖动移动了数字标签。还有一个代码笔链接到玩具数据: https://codepen.io/ proto /pen/bKGOXg

var chart = {
  data: [
    {
      rowKey: "current",
      name: "current",
      x: ["0.1", "0.5", "1", "2", "5", "10", "25", "50", "100", "250", "500"],
      y: [
        0.006369426751592357,
        0.012738853503184714,
        0.03821656050955414,
        0.03184713375796178,
        0.10828025477707007,
        0.24203821656050956,
        0.2229299363057325,
        0.20382165605095542,
        0.12101910828025478,
        0.006369426751592357,
        0.006369426751592357
      ],
      values: [
        0.006369426751592357,
        0.012738853503184714,
        0.03821656050955414,
        0.03184713375796178,
        0.10828025477707007,
        0.24203821656050956,
        0.2229299363057325,
        0.20382165605095542,
        0.12101910828025478,
        0.006369426751592357,
        0.006369426751592357
      ],
      text: [
        "1%",
        "1%",
        "4%",
        "3%",
        "11%",
        "24%",
        "22%",
        "20%",
        "12%",
        "1%",
        "1%"
      ],
      labels: [
        "0.1",
        "0.5",
        "1",
        "2",
        "5",
        "10",
        "25",
        "50",
        "100",
        "250",
        "500"
      ],
      type: "bar",
      hoverinfo: "x+y",
      textposition: "auto",
      orientation: "v",
      mode: "lines+markers",
      marker: { color: null, colors: null },
      uid: "2cf1e3"
    }
  ],
  layout: {

    type: "bar",
    orientation: "v",
    barmode: "",
    showlegend: false,
    dataValues: true,
    series: { hoverinfo: "x+y" },
    legend: {
      orientation: "v",
      yanchor: "bottom",
      xanchor: "right",
      traceorder: "normal"
    },
    titlefont: { size: 12 },
    margin: { l: 80, r: 10, t: 140, b: 80 },
    xaxis: {
      tickangle: 0,
      tickfont: { size: 12 },
      titlefont: { size: 12, weight: 700 },
      type: "category",
      title: "scenario",
      range: [-0.5, 10.5],
      autorange: true
    },
    yaxis: {
      title: "",
      type: "linear",
      tickformat: ".0%",
      hoverformat: ".0%",
      range: [0, 0.25477707006369427],
      autorange: true
    },
    width: 500,
    height: 360,

  },
  options: {
    displayModeBar: false,
    modeBarButtonsToRemove: ["sendDataToCloud", "hoverCompareCartesian"]
  }
};
Plotly.newPlot("myDiv", chart);

1 回复 | 直到 6 年前

Naren Murali 6 年前

所以我检查了绘图文档,请检查可用的文档 here

我们在 bar 调用的图表对象 offset . plotly将此属性描述为。

偏移量(数字或数字数组)
移动绘制条的位置(以位置轴为单位)。在“组”barmode中,设置“偏移量”的记录道将被排除,并且而是以“覆盖”模式绘制。

当我将属性设置为 0.1 ,我得到了预期的结果。请检查下面的例子,让我知道如果这解决了你的问题!

var chart = {
  data: [
    {
      rowKey: "current",
      name: "current",
      x: ["0.1", "0.5", "1", "2", "5", "10", "25", "50", "100", "250", "500"],
      offset: 0.1,
      y: [
        0.006369426751592357,
        0.012738853503184714,
        0.03821656050955414,
        0.03184713375796178,
        0.10828025477707007,
        0.24203821656050956,
        0.2229299363057325,
        0.20382165605095542,
        0.12101910828025478,
        0.006369426751592357,
        0.006369426751592357
      ],
      values: [
        0.006369426751592357,
        0.012738853503184714,
        0.03821656050955414,
        0.03184713375796178,
        0.10828025477707007,
        0.24203821656050956,
        0.2229299363057325,
        0.20382165605095542,
        0.12101910828025478,
        0.006369426751592357,
        0.006369426751592357
      ],
      text: [
        "1%",
        "1%",
        "4%",
        "3%",
        "11%",
        "24%",
        "22%",
        "20%",
        "12%",
        "1%",
        "1%"
      ],
      labels: [
        "0.1",
        "0.5",
        "1",
        "2",
        "5",
        "10",
        "25",
        "50",
        "100",
        "250",
        "500"
      ],
      type: "bar",
      hoverinfo: "x+y",
      textposition: "auto",
      orientation: "v",
      mode: "lines+markers",
      marker: { color: null, colors: null },
      uid: "2cf1e3"
    }
  ],
  layout: {
    colorway: [
      "#3399CC",
      "#99BB66",
      "#2266AA",
      "#FFCC00",
      "#888888",
      "#FFAA00",
      "#800080"
    ],
    color: "purple",
    plotlyType: "bar",
    type: "bar",
    orientation: "v",
    barmode: "",
    showlegend: false,
    dataValues: true,
    series: { hoverinfo: "x+y" },
    legend: {
      orientation: "v",
      yanchor: "bottom",
      xanchor: "right",
      traceorder: "normal"
    },
    titlefont: { size: 12 },
    margin: { l: 80, r: 10, t: 140, b: 80 },
    xaxis: {
      tickangle: 0,
      tickfont: { size: 12 },
      titlefont: { size: 12, weight: 700 },
      type: "category",
      title: "scenario",
      range: [-0.5, 10.5],
      ticks: "outside",
      autorange: true
    },
    yaxis: {
      title: "",
      type: "linear",
      tickformat: ".0%",
      hoverformat: ".0%",
      range: [0, 0.25477707006369427],
      autorange: true
    },
    transposeData: false,
    showOverall: false,
    width: 500,
    height: 360,
    showLegend: true,
    reverse: {},
    titles: {},
    swapCategoryAndLegend: false
  },
  options: {
    displayModeBar: false,
    modeBarButtonsToRemove: ["sendDataToCloud", "hoverCompareCartesian"]
  }
};
Plotly.newPlot("myDiv", chart);

<head>
  <!-- Plotly.js -->
   <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<!-- Plotly chart will be drawn inside this DIV -->
<div id="myDiv" style="width: 100%; height: 500px;"></div>
  <script>
  /* JAVASCRIPT CODE GOES HERE */
  </script>
</body>