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

Question

在 Plotly.js 中是否可以在条之间放置刻度线？在这里，我希望刻度线代表连续分布中的切点，而条形图代表间隔内的计数。另一种方法是制作轴标签范围，例如“5-<10”、“10-<25”、“25-<50”等，但显示中断似乎更清晰。

下面是 Paintbrush 中的模型，显示了所需的效果，这里我添加了刻度线并通过拖动移动了数字标签。也是一个Codepen link to toy data: 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);

Answer 1

所以我检查了 plotly 文档，请检查可用的文档 here

我们在名为 offset 的 bar 图表对象下有一个属性。 Plotly 将此属性描述为。

offset (number or array of numbers)
Shifts the position where the bar is drawn (in position axis units). In "group" barmode, traces that set "offset" will be excluded and drawn in "overlay" mode instead.

当我将属性设置为 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>

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

Place tick marks between bars in Plotly.js

javascript

axis-labels

plotly

plotly.js