Question

语言：javascript＆amp; 图表框架：情节

我希望我的条形从Y轴上的特定点开始，而不是Y轴上的0。默认情况下，条形总是从Y轴上的0开始。

我正在使用情节条形图

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: 'lines+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: 'lines+markers',
          hoverinfo: 'text',
          marker: {
            color: 'rgb(0, 255, 0)',
            size: 6
          },
          line: {
            color: 'rgb(0, 255, 0)',
            width: 1
          }
        };

        var trace3 = {

         x: ['JP','JP','CN','CN','TW','TW','AU','AU','HK','HK','MY','MY','PH','PH','SG','SG','SP','SP','BN','BN','LK','LK',
             'MO','MO','TH','TH','VB','VB','VN','VN','ID','ID','BD','IN','NP','NP','PK','PK'],
         y: [],
         text : ['19.00','22.03','20.30','1.13','20.30','1.24','21.00','24.47','21.00','3.29','21.00','4.57','21.00','23.24','21.00','2.17'
                 ,'21.00','1.06'],
         type : 'bar',        
         mode : 'bar',
         line: {
                color: 'rgb(0, 102, 255)',
                width: 3
            }       
        }

        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);
        }

        for (i = 0; i < trace3.text.length; i += 1) {
          trace3.y.push((parseFloat(trace3.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: 2000,
          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.75
        };
        var data = [trace1, trace2, trace3];
        Plotly.newPlot('myDiv', data, layout);

Answer 1

搞定了

我需要再使用两条迹线来保持条形的起点和终点。然后使用标记颜色忽略从0点到我预期起点的条形。

web.config

在曲线条形图中从y轴的特定点开始，而不是零

1 个答案: