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

Question

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

下面是 Paintbrush 中的模型，显示了所需的效果，这里我添加了刻度线并通过拖动移动了数字标签。还有一个指向玩具数据的 Codepen 链接: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

我们在 bar 图表对象下有一个名为 offset 的属性. 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>