Javascript 条形图-自定义y轴

我有一个要求，我需要一个完全定制的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轴范围的样子

我尝试过使用“range:[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);

---

谢谢

在Plotly中，您可以执行以下操作：

• 将y值放入

  文本
  属性中

• 调整y值，即19等于0，24等于5，等等
• 使用

  tickvals

  给出从0到23的范围，但使用

  ticktext

  将其标记为

  '19'

  到

  '18'

• 将

  tickmode

  设置为

  array

  以确保

  ticktext

  和

  tickvals

  被实际读取
• 将

  xaxis

  范围调整为
  [-0.5,23.5]

---

var offset=19；
变量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']；
变量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'，'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'],
模式：'标记'，
hoverinfo:'文本'，
标记：{
颜色：“rgb（128，0，128）”，
尺码：8
},
行：{
颜色：“rgb（128，0，128）”，
宽度：1
}
};
变量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'，'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'],
模式：'标记'，
hoverinfo:'文本'，
标记：{
颜色：“rgb（0，255，0）”，
尺码：6
}
};
var i=0；
对于（i=0；i

您使用的是哪种语言？您能添加到目前为止您尝试过的代码吗？我在主要问题中附上了上面的代码片段。我使用的是javascript。我担心这在绘图上相当棘手。您需要操作数据并覆盖hoverinfo。对以下问题有任何建议。提前解决谢谢：-）谢谢马西米兰，我用了你昨天的密码，这很有帮助。