我想让我的谷歌条形图在条形图外显示条形图标签,当标签太大而无法放入条形图内时。看起来这应该是默认的行为,但我的图表并没有这样做。下面是代码渲染时的问题截图。你可以在第2,3,5,7和8行看到这个问题。
这是我的代码。
// START Disease Resistance
function disease() {
var data = google.visualization.arrayToDataTable([
['Disease', 'Resistance Rating', { role: 'annotation'}, { role: 'style'}, { role: 'tooltip'}],
['Barley Yellow Dwarf', 5, '5', '#221f72', 'Barley Yellow Dwarf | Resistance Rating: 5'], // Resistance rating is calculated by subracting the value from 10
['Fusarium Head Blight', 1, '9', '#221f72', 'Fusarium Head Blight | Resistance Rating: 9'],
['Hessian Fly', 1, '9', '#221f72', 'Hessian Fly | Resistance Rating: 9'],
['Leaf Rust', 2, '8', '#221f72', 'Leaf Rust | Resistance Rating: 8'],
['Powdery Mildew', 1, '9', '#221f72', 'Powdery Mildew | Resistance Rating: 9'],
['Soil-Borne Mosaic', 4, '6', '#221f72', 'Soil-Borne Mosaic | Resistance Rating: 6'],
['Stem Rust', 1, '9', '#221f72', 'Stem Rust | Resistance Rating: 9'],
['Stripe Rust', 1, '9', '#221f72', 'Stripe Rust | Resistance Rating: 9'],
['Tan Spot', 5, '5', '#221f72', 'Tan Spot | Resistance Rating: 5'],
['Wheat Streak Mosaic', 5, '5', '#221f72', 'Wheat Streak Mosaic | Resistance Rating: 5'],
]);
var paddingHeight = 80;
var rowHeight = data.getNumberOfRows() * 80;
var chartHeight = rowHeight + paddingHeight;
var options = {
'backgroundColor': 'transparent',
annotations: {textStyle: {fontSize: 16, fontName: 'Source Sans Pro'}},
legend: { position: 'none'},
height: chartHeight,
colors: ['#F4AA00'],
chartArea: {
width: '100%',
height: rowHeight
},
hAxis: {
ticks: [{v:1, f:'9'}, {v:2, f:'8'}, {v:3, f:'7'}, {v:4, f:'6'}, {v:5, f:'5'}, {v:6, f:'4'}, {v:7, f:'3'}, {v:8, f:'2'}, {v:9, f:'1'}, {v:10, f:'0'}],
title: '7-9 Susceptible | 4-6 Intermediate | 1-3 Resistant',
viewWindow: {
min: 0,
max: 10
},
minValue: 0,
textStyle: {
fontName: 'Source Sans Pro',
bold: true,
fontSize: 12,
color: '#4d4d4d'
},
titleTextStyle: {
fontName: 'Source Sans Pro',
bold: true,
fontSize: 14,
color: '#4d4d4d'
}
},
vAxis: {
textPosition: 'in',
title: 'Disease',
textStyle: {
fontName: 'Source Sans Pro',
fontSize: 14,
bold: false,
color: '#fff'
},
titleTextStyle: {
fontName: 'Source Sans Pro',
fontSize: 14,
bold: true,
color: '#848484'
}
}
};
var chart = new google.visualization.BarChart(document.getElementById('disease'));
chart.draw(data, options);
// redraw charts responsively
(function($) {
function resizeCharts () {
chart.draw(data, options);
}
$(window).resize(resizeCharts);
})( jQuery );
}
// END Disease Resistance
谢谢!
很明显,下面的选项不能很好地工作......
vAxis.textPosition: 'in'
唯一一个其他的选项可能就够了...
theme: 'maximized'
这意味着一半的文本将在蓝色背景上,其余的在白色背景上。好的但同时也与注解重叠。
我想出的唯一其他选项是将标签添加到注释中,并从y轴上删除。
这样做的结果和上面的一样,但是防止了与注解的重叠。
文本被放置在条形图的末尾,而不是起始位置。'ready'
但在任何交互活动中,如 "鼠标悬停 "时,图表会将它们移回。MutationObserver
以保持它们的位置,在酒吧的开始。
请看下面的工作片段...
google.charts.load('current', {
packages: ['corechart']
}).then(disease);
function disease() {
var data = google.visualization.arrayToDataTable([
['Disease', 'Resistance Rating', { role: 'annotation'}, { role: 'style'}, { role: 'tooltip'}],
['', 5, 'Barley Yellow Dwarf: 5', '#221f72', 'Barley Yellow Dwarf | Resistance Rating: 5'], // Resistance rating is calculated by subracting the value from 10
['', 1, 'Fusarium Head Blight: 9', '#221f72', 'Fusarium Head Blight | Resistance Rating: 9'],
['', 1, 'Hessian Fly: 9', '#221f72', 'Hessian Fly | Resistance Rating: 9'],
['', 2, 'Leaf Rust: 8', '#221f72', 'Leaf Rust | Resistance Rating: 8'],
['', 1, 'Powdery Mildew: 9', '#221f72', 'Powdery Mildew | Resistance Rating: 9'],
['', 4, 'Soil-Borne Mosaic: 6', '#221f72', 'Soil-Borne Mosaic | Resistance Rating: 6'],
['', 1, 'Stem Rust: 9', '#221f72', 'Stem Rust | Resistance Rating: 9'],
['', 1, 'Stripe Rust: 9', '#221f72', 'Stripe Rust | Resistance Rating: 9'],
['', 5, 'Tan Spot: 5', '#221f72', 'Tan Spot | Resistance Rating: 5'],
['', 5, 'Wheat Streak Mosaic: 5', '#221f72', 'Wheat Streak Mosaic | Resistance Rating: 5'],
]);
var paddingHeight = 80;
var rowHeight = data.getNumberOfRows() * 80;
var chartHeight = rowHeight + paddingHeight;
var options = {
backgroundColor: 'transparent',
annotations: {textStyle: {fontSize: 16, fontName: 'Source Sans Pro'}},
legend: {position: 'none'},
height: chartHeight,
colors: ['#F4AA00'],
chartArea: {
width: '100%',
height: rowHeight
},
hAxis: {
ticks: [{v:1, f:'9'}, {v:2, f:'8'}, {v:3, f:'7'}, {v:4, f:'6'}, {v:5, f:'5'}, {v:6, f:'4'}, {v:7, f:'3'}, {v:8, f:'2'}, {v:9, f:'1'}, {v:10, f:'0'}],
title: '7-9 Susceptible | 4-6 Intermediate | 1-3 Resistant',
viewWindow: {
min: 0,
max: 10
},
minValue: 0,
textStyle: {
fontName: 'Source Sans Pro',
bold: true,
fontSize: 12,
color: '#4d4d4d'
},
titleTextStyle: {
fontName: 'Source Sans Pro',
bold: true,
fontSize: 14,
color: '#4d4d4d'
}
},
vAxis: {
title: 'Disease',
textStyle: {
fontName: 'Source Sans Pro',
fontSize: 14,
bold: false
},
titleTextStyle: {
fontName: 'Source Sans Pro',
fontSize: 14,
bold: true,
color: '#848484'
}
}
};
var chart = new google.visualization.BarChart(document.getElementById('disease'));
google.visualization.events.addListener(chart, 'ready', function () {
var observer = new MutationObserver(moveAnnotations);
observer.observe(chart.getContainer(), {
childList: true,
subtree: true
});
});
function moveAnnotations() {
var chartLayout = chart.getChartLayoutInterface();
var chartBounds = chartLayout.getChartAreaBoundingBox();
var barBounds = chartLayout.getBoundingBox('bar#0#0');
var labels = chart.getContainer().getElementsByTagName('text');
Array.prototype.forEach.call(labels, function(label, index) {
if (label.getAttribute('font-size') === '16') {
label.setAttribute('x', barBounds.left + chartBounds.left + 4);
label.setAttribute('fill', 'magenta');
label.setAttribute('text-anchor', 'start');
}
});
}
chart.draw(data, options);
// redraw charts responsively
(function($) {
function resizeCharts () {
chart.draw(data, options);
}
$(window).resize(resizeCharts);
})( jQuery );
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="disease"></div>
注:不建议使用 'magenta'
作为颜色,但表明需要另一种颜色......
谢谢@白帽子,感谢你的详细回复。我最终将疾病信息与注释嵌套在一起,然后,我使用现有的textPosition'none'属性隐藏了VAxis。
['Disease', 'Resistance Rating', { role: 'annotation'}, { role: 'style'}, { role: 'tooltip'}],
['Barley Yellow Dwarf', 5, 'Barley Yellow Dwarf | 5', '#221f72', 'Barley Yellow Dwarf | Resistance Rating: 5'], // Resistance rating is calculated by subracting the value from 10
['Fusarium Head Blight', 1, 'Fusarium Head Blight | 9', '#221f72', 'Fusarium Head Blight | Resistance Rating: 9'],
['Hessian Fly', 1, 'Hessian Fly | 9', '#221f72', 'Hessian Fly | Resistance Rating: 9'],
['Leaf Rust', 2, 'Leaf Rust | 8', '#221f72', 'Leaf Rust | Resistance Rating: 8'],
['Powdery Mildew', 1, 'Powdery Mildew | 9', '#221f72', 'Powdery Mildew | Resistance Rating: 9'],
['Soil-Borne Mosaic', 4, 'Soil-Borne Mosaic | 6', '#221f72', 'Soil-Borne Mosaic | Resistance Rating: 6'],
['Stem Rust', 1, 'Stem Rust | 9', '#221f72', 'Stem Rust | Resistance Rating: 9'],
['Stripe Rust', 1, 'Stripe Rust | 9', '#221f72', 'Stripe Rust | Resistance Rating: 9'],
['Tan Spot', 5, 'Tan Spot | 5', '#221f72', 'Tan Spot | Resistance Rating: 5'],
['Wheat Streak Mosaic', 5, 'Wheat Streak Mosaic | 5', '#221f72', 'Wheat Streak Mosaic | Resistance Rating: 5'],
然后,我使用现有的textPosition'none'属性隐藏了VAxis。
vAxis: {
textPosition: 'none',
...etc.