javascript - 条形图 - 自定义 y 轴

Question

我有一个要求，需要完全自定义的 Y 轴。我想在条形图的 Y 轴上显示时钟“小时”。

但要求是，我的 Y 轴应该从 -> 19,20,21,22,23,24,01,02,03,04,05,06,07,08,09,10,11 开始,12,13,14,15,16,17,18

这就是我想要的 Y 轴范围的样子。

我尝试使用“范围:[a-b]”选项，但它会自动按升序对数字进行排序。

PS:我正在使用plotly，但是如果有任何其他图表框架可以满足目的，那么我会选择它。

var trace1 = {
            x: ['JP','CN','TW','AU','HK','MY','PH','SG','SP','BN','LK','MO','TH','VB','VN','ID','BD','IN','NP','PK','AE','AO','DF','IQ','MU','BH','OM','ZA','ZM','KE','ZW','BW','TZ','UG','JO','QA','GB','CI','CM','GH','GM','NG','SL','US','BR'],
            y: ['19.00','20.30','20.30','21.00','21.00','21.00','21.00','21.00','21.00','22.00','22.00','22.00','22.00','22.00','22.00','22.15','22.30','22.30','22.30','23.00','23.30','23.30','23.30','23.30','23.30','24.00','24.00','24.30','24.30','24.35','24.35','24.40','24.45','24.50','01.00','01.00','03.30','04.30','04.30','04.30','04.30','04.30','04.30','05.30','07.30'],
            mode: 'markers',
            marker: {
                    color: 'rgb(128, 0, 128)',
                    size: 8
            },
            line:   {
                    color: 'rgb(128, 0, 128)',
                    width: 1
            }   
        };

        var trace2 = {
            x: ['JP','CN','TW','AU','HK','MY','PH','SG','SP','BN','LK','MO','TH','VB','VN','ID','BD','IN','NP','PK','AE','AO','DF','IQ','MU','BH','OM','ZA','ZM','KE','ZW','BW','TZ','UG','JO','QA','GB','CI','CM','GH','GM','NG','SL','US','BR'] ,
            y: ['22.03','1.13','1.24','24.47','3.29','4.57','23.24','2.17','1.06','24.39','3.01','24.53','3.10','24.49','24.59','1.16','2.29','3.03','1.27','1.23','3.07','7.18','2.54','2.33','3.22','3.03','1.48','5.40','5.40','5.40','6.07','5.40','5.40','5.40','6.46','2.27','6.46','6.19','6.19','8.31','8.56','6.50','6.19','13.59','9.23'],
                  mode: 'markers',
                  marker: {
                    color:'rgb(0, 255, 0)',
                    size : 6
                  }
                };


                var data = [trace1,trace2];

                var layout = {
                autosize: false,
                 width: 1400,
                height: 700,
                  title: 'Magellan Batch DashBoard',
                  font:{
                    family: 'Raleway, snas-serif'
                  },
                  showlegend: false,
                  xaxis: {
                    title: 'Countries',  
                    tickangle: -45,
                  },
                  yaxis: {
                      autotick: false,
                        ticks: 'outside',
                        tick0: 0,
                        dtick: 1,
                        ticklen: 8,
                        tickwidth: 4,
                    range : [19,20,21,22,23,24,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18], 
                    title : 'Time of execution for each country',  
                    zeroline: false,
                  },
                  bargap :0.30
                };

                Plotly.newPlot('myDiv', data, layout);

谢谢

Answer 1

在 Plotly 中你可以执行以下操作:

• 将 y 值放入 text 属性中
• 调整 y 值，即 19 等于 0、24 等于 5 等。
• 使用 tickvals 给出 0 到 23 之间的范围，但使用 ticktext 将其标记为 '19' 到 '18'
• 将 tickmode 设置为 array 以确保 ticktext 和 tickvals 确实被读取
• 将xaxis 范围调整为[-0.5, 23.5]

<小时/>

var offset = 19;
var tick_str = ['19', '20', '21', '22', '23', '24', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18'];

var trace1 = {
  x: ['JP', 'CN', 'TW', 'AU', 'HK', 'MY', 'PH', 'SG', 'SP', 'BN', 'LK', 'MO', 'TH', 'VB', 'VN', 'ID', 'BD', 'IN', 'NP', 'PK', 'AE', 'AO', 'DF', 'IQ', 'MU', 'BH', 'OM', 'ZA', 'ZM', 'KE', 'ZW', 'BW', 'TZ', 'UG', 'JO', 'QA', 'GB', 'CI', 'CM', 'GH', 'GM', 'NG', 'SL', 'US', 'BR'],
  y: [],
  text: ['19.00', '20.30', '20.30', '21.00', '21.00', '21.00', '21.00', '21.00', '21.00', '22.00', '22.00', '22.00', '22.00', '22.00', '22.00', '22.15', '22.30', '22.30', '22.30', '23.00', '23.30', '23.30', '23.30', '23.30', '23.30', '24.00', '24.00', '24.30', '24.30', '24.35', '24.35', '24.40', '24.45', '24.50', '01.00', '01.00', '03.30', '04.30', '04.30', '04.30', '04.30', '04.30', '04.30', '05.30', '07.30'],
  mode: 'markers',
  hoverinfo: 'text',
  marker: {
    color: 'rgb(128, 0, 128)',
    size: 8
  },
  line: {
    color: 'rgb(128, 0, 128)',
    width: 1
  }
};

var trace2 = {
  x: ['JP', 'CN', 'TW', 'AU', 'HK', 'MY', 'PH', 'SG', 'SP', 'BN', 'LK', 'MO', 'TH', 'VB', 'VN', 'ID', 'BD', 'IN', 'NP', 'PK', 'AE', 'AO', 'DF', 'IQ', 'MU', 'BH', 'OM', 'ZA', 'ZM', 'KE', 'ZW', 'BW', 'TZ', 'UG', 'JO', 'QA', 'GB', 'CI', 'CM', 'GH', 'GM', 'NG', 'SL', 'US', 'BR'],
  y: [],
  text: ['22.03', '1.13', '1.24', '24.47', '3.29', '4.57', '23.24', '2.17', '1.06', '24.39', '3.01', '24.53', '3.10', '24.49', '24.59', '1.16', '2.29', '3.03', '1.27', '1.23', '3.07', '7.18', '2.54', '2.33', '3.22', '3.03', '1.48', '5.40', '5.40', '5.40', '6.07', '5.40', '5.40', '5.40', '6.46', '2.27', '6.46', '6.19', '6.19', '8.31', '8.56', '6.50', '6.19', '13.59', '9.23'],
  mode: 'markers',
  hoverinfo: 'text',
  marker: {
    color: 'rgb(0, 255, 0)',
    size: 6
  }
};

var i = 0;
for (i = 0; i < trace1.text.length; i += 1) {
  trace1.y.push((parseFloat(trace1.text[i]) - offset + 24) % 24);
}
for (i = 0; i < trace2.text.length; i += 1) {
  trace2.y.push((parseFloat(trace2.text[i]) - offset + 24) % 24);
}

var ticks = []
for (i = 0; i < tick_str.length; i += 1) {
  ticks.push((parseInt(tick_str[i]) - offset + 24) % 24);
}
var layout = {
  autosize: false,
  width: 1400,
  height: 700,
  title: 'Magellan Batch DashBoard',
  font: {
    family: 'Raleway, snas-serif'
  },
  showlegend: false,
  xaxis: {
    title: 'Countries',
    tickangle: -45,
  },
  yaxis: {
    autotick: false,
    ticks: 'outside',
    tick0: 19,
    dtick: 1,
    ticklen: 8,
    tickwidth: 4,
    tickvals: ticks,
    ticktext: tick_str,
    tickmode: 'array',
    title: 'Time of execution for each country',
    zeroline: false,
    range: [-0.5, 23.5]
  },
  bargap: 0.30
};
var data = [trace1, trace2];
Plotly.newPlot('myDiv', data, layout);

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id='myDiv'> </div>