條形圖 - 自定義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：我使用情節，但如果有任何其他圖表框架可以滿足目的，那麼我會選擇它。

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，你可以做到以下幾點：

• 放在text屬性的y值
• 調整y值，即19等於0， 24等於5等
• 使用tickvals給出從0到23的範圍，但使用ticktext來標記它'19'到'18'
• 設置tickmode到array確保ticktext和tickvals實際上讀
• 調整xaxisrange到[-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>