本文介绍了从y轴上的特定点开始的条形，而不是在绘图条形图中的零的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
语言:javascript&图表框架:plotly
language : javascript & chart framework : plotly
我希望条形图从Y轴上的特定点开始，而不是从Y轴上的0开始.默认情况下，条形总是在Y轴上从0开始.
I want my bar to start from a particular point on Y axis instead of 0 on Y axis.By default the bar always start from 0 on Y axis.
我使用的是条形图
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);
推荐答案
知道了
我需要再使用两条轨迹来保持条形的起点和终点.然后使用标记"颜色忽略从点0到预期起点的条形.
I needed to use two more traces to hold the start and the end point of the bar. And then use a Marker color to ignore the bar from point 0 to my expected start point.
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 xData = ['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'];
var trace3 = {
x: xData,
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'],
marker: {
color: 'rgba(1,1,1,0.0)'
},
type : 'bar',
hoverinfo: 'text'
};
var trace4 = {
x: xData,
y: [],
text : ['3.03','4.83', '4.94', '3.47', '6.29', '7.57', '2.24', '5.17', '4.06', '2.39', '5.01', '2.53', '5.1', '2.49', '2.59', '3.01', '3.99', '4.73', '2.97', '2.23', '3.77', '7.88', '3.24', '3.03', '3.92', '3.03', '1.48', '5.1', '5.1', '5.05', '5.72', '5', '4.95', '4.9', '5.46', '1.27', '3.16', '1.89', '1.89', '4.01', '4.26', '2.2', '1.89', '8.29', '1.93',],
marker: {
color: 'rgba(55,128,191,0.7)',
line: {
color: 'rgba(55,128,191,1.0)',
width: 2
}
},
type : 'bar'
};
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);
}
for (i = 0; i < trace4.text.length; i += 1) {
trace4.y.push((parseFloat(trace4.text[i])));
}
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,
barmode: 'stack',
showlegend: false,
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, trace4];
Plotly.newPlot('myDiv', data, layout);
这篇关于从y轴上的特定点开始的条形，而不是在绘图条形图中的零的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！