Несколько осей X для одного графика в Plotly.js

У меня есть один график, который я хочу показать две единицы измерения по оси X.

Представьте, что на моем графике нормальная ось X - «дюймы». Я также хочу показать «Сантиметр» одновременно с другой осью X прямо под первой осью X.

Дюймы и сантиметры имеют соотношение 1: 1, поэтому не должно быть никаких забавных дел, связанных с искажением следа.

Я пробовал что-то вроде этого для своего макета:

var layout = {
    title: '',
    xaxis: {
        autorange: true,
        rangeslider: {},
        type: 'linear',
        title: 'Inches'
    },
    xaxis2: {
        autorange: true,
        rangeslider: {},
        type: 'linear',
        title: 'Centimeter',
        overlaying: 'x'
    },
    yaxis: {
        autorange: true,
        type: 'linear',
        title: ''
    },
};

Но это не работает, и по очевидным причинам, поскольку я даже не включаю подробности о преобразовании сантиметров.

Вы все знаете, как добиться такого взгляда? Нужно ли мне делать вторую трассировку с соответствующими данными Y?

javascript plotly plotly.js

23.05.2018 23:16

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

1 380

Ответы 1

Не уверен, что ты действительно этого хочешь. Но это может помочь вам поиграть с этим.

Посетите: пример

var y = ['dot','pen','pencil','scale','stick'];
var x = [0,5,9,12,16];//inc
var tinc = []; //inc
var tcm = []; //cm
var incToCm ='';
for (var i = 0; i < x.length; i++) 
{
   incToCm = (x[i] * 2.54)+'cm';
   tcm.push(incToCm);
   tinc.push(x[i]+'inc');
}

var trace1 = {
  x:x,
  y:y,
  type:'bar',
  xaxis:'x',
  yaxis:'y'
}
var trace2 = {
  x:trace1.x,
  y:trace1.y,
  type:trace1.type,
  xaxis:'x2',
  yaxis:'y'
}
var data =[trace1,trace2];
var layout = {
  xaxis:{
    tickvals:x,
    ticktext:tinc,
    ticksuffix:'inc',
    tickangle:45,
  }, 
  xaxis2:{
    tickvals:x,
    ticktext:tcm,
    ticklen:18,
    tickangle:45,
    tickwidth:0,
    tickcolor:'#eee',
  },
  showlegend:false
}
Plotly.plot('plotElement', data,layout);

Пример вывода

Это действительно близко, но если возможно, мне бы хотелось, чтобы вторая горизонтальная ось была ниже первой. Хотя, возможно, я прошу слишком многого: P

— 24.05.2018 20:35

Не возражаете, если вы предоставите образец изображения, которое вы хотите сделать? может быть, это поможет мне лучше понять вашу проблему. Спасибо

— 24.05.2018 21:03

24.05.2018 20:07