Размещайте галочки между барами в Plotly.js - PullRequest
Новая
       42

Размещайте галочки между барами в Plotly.js

0 голосов
/ 30 мая 2018

Можно ли в Plotly.js ставить отметки между барами?Здесь я хотел бы, чтобы отметки представляли точки среза в непрерывном распределении, а столбцы представляли счет в интервалах между ними.Альтернативой является создание диапазонов меток осей, например, «5–10», «10–25», «25–50» и т. Д., Но кажется, что разрывы выглядят чище.

Нижеэто макет в Paintbrush, показывающий желаемый эффект, здесь я добавил метки и переместил метки с номерами перетаскиванием.Также есть ссылка Codepen на данные игрушек: https://codepen.io/proto/pen/bKGOXg

enter image description here

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 Ответ

0 голосов
/ 30 мая 2018

Итак, я проверил документацию на графике, пожалуйста, ознакомьтесь с доступной документацией здесь

У нас есть свойство в bar объекте диаграммы, называемое offset.Плотно описывает это свойство как.

смещение (число или массив чисел)
Сдвиг позиции, на которой рисуется полоса (в единицах оси положения).В режиме «группа» трассы, которые устанавливают «смещение», будут исключены и выведены в режиме «наложения».

Когда я устанавливаю свойство на 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>
...