google图表文字方向
google chart text direction
我正在尝试用 google 图表制作柱形图。
function drawChartEPS(response) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Period');
data.addColumn('number', 'Q1');
data.addColumn({type: 'string', role: 'style'});
data.addColumn({type:'string', role: 'annotation'}, '');
data.addColumn('number', 'Q2');
data.addColumn({type: 'string', role: 'style'});
data.addColumn({type:'string', role: 'annotation'}, '');
data.addColumn('number', 'Q3');
data.addColumn({type: 'string', role: 'style'});
data.addColumn({type:'string', role: 'annotation'}, '');
data.addColumn('number', 'Q4');
data.addColumn({type: 'string', role: 'style'});
data.addColumn({type:'string', role: 'annotation'}, '');
data.addRows(response);
var options = {
width: '100%',
height: '80%',
bar: {groupWidth: "90%", width: "100%", gap: "30%"},
chartArea:{width:"100%",height:"100%"},
annotations: {
highContrast: true,
style: 'point',
textStyle: {
fontName: 'Sans',
fontSize: 16,
bold: false,
italic: false,
direction:-1,
slantedText:true,
slantedTextAngle:90,
opacity: 1
}
},
legend: {
position: 'none'
}
};
var chart = new google.visualization.ColumnChart(
document.getElementById('EPSChart'));
chart.draw(data, options);
}
并得到结果
google chart
但我需要我的图表看起来像这张照片 examle
无法更改图表上文本的方向和添加箭头
没有用于更改注释旋转的标准配置选项,
但您可以在图表的 'ready'
事件中手动更改它们。
但是,您需要使用 MutationObserver
,
因为图表会将它们旋转回任何 activity、
比如"on hover"。
要旋转,请向 svg 中的每个 <text>
元素添加一个 transform
属性。
在 transform
属性中,使用 --> rotate(z x y)
,其中...
z
= 旋转角度
x
= 元素的 x 坐标
y
= 元素的y坐标
x
& y
已经是元素中的属性,
所以只需要旋转值,比如--> -90
transform="rotate(-90 100 300)"
请参阅以下工作片段...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Period');
data.addColumn('number', 'Q1');
data.addColumn({type: 'string', role: 'style'});
data.addColumn({type:'string', role: 'annotation'}, '');
data.addColumn('number', 'Q2');
data.addColumn({type: 'string', role: 'style'});
data.addColumn({type:'string', role: 'annotation'}, '');
data.addColumn('number', 'Q3');
data.addColumn({type: 'string', role: 'style'});
data.addColumn({type:'string', role: 'annotation'}, '');
data.addColumn('number', 'Q4');
data.addColumn({type: 'string', role: 'style'});
data.addColumn({type:'string', role: 'annotation'}, '');
data.addRows([['DEC', 500, 'cyan', '500', 600, 'magenta', '600', 650, 'yellow', '650', 700, 'lime', '700']]);
var options = {
width: '100%',
height: '80%',
bar: {groupWidth: "90%", width: "100%", gap: "30%"},
chartArea:{width:"100%",height:"100%"},
annotations: {
highContrast: true,
style: 'point',
textStyle: {
fontName: 'Sans',
fontSize: 16,
bold: false,
italic: false,
direction:-1,
slantedText:true,
slantedTextAngle:90,
opacity: 1
}
},
legend: {
position: 'none'
}
};
var container = document.getElementById('EPSChart')
var chart = new google.visualization.ColumnChart(container);
google.visualization.events.addListener(chart, 'ready', function () {
var observer = new MutationObserver(function () {
var labels = container.getElementsByTagName('text');
Array.prototype.forEach.call(labels, function(label) {
if (label.getAttribute('text-anchor') === 'middle') {
label.setAttribute('transform', 'rotate(-90, ' + label.getAttribute('x') + ' ' + label.getAttribute('y') + ')');
}
});
});
observer.observe(container, {
childList: true,
subtree: true
});
});
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="EPSChart"></div>
我正在尝试用 google 图表制作柱形图。
function drawChartEPS(response) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Period');
data.addColumn('number', 'Q1');
data.addColumn({type: 'string', role: 'style'});
data.addColumn({type:'string', role: 'annotation'}, '');
data.addColumn('number', 'Q2');
data.addColumn({type: 'string', role: 'style'});
data.addColumn({type:'string', role: 'annotation'}, '');
data.addColumn('number', 'Q3');
data.addColumn({type: 'string', role: 'style'});
data.addColumn({type:'string', role: 'annotation'}, '');
data.addColumn('number', 'Q4');
data.addColumn({type: 'string', role: 'style'});
data.addColumn({type:'string', role: 'annotation'}, '');
data.addRows(response);
var options = {
width: '100%',
height: '80%',
bar: {groupWidth: "90%", width: "100%", gap: "30%"},
chartArea:{width:"100%",height:"100%"},
annotations: {
highContrast: true,
style: 'point',
textStyle: {
fontName: 'Sans',
fontSize: 16,
bold: false,
italic: false,
direction:-1,
slantedText:true,
slantedTextAngle:90,
opacity: 1
}
},
legend: {
position: 'none'
}
};
var chart = new google.visualization.ColumnChart(
document.getElementById('EPSChart'));
chart.draw(data, options);
}
并得到结果 google chart
但我需要我的图表看起来像这张照片 examle 无法更改图表上文本的方向和添加箭头
没有用于更改注释旋转的标准配置选项,
但您可以在图表的 'ready'
事件中手动更改它们。
但是,您需要使用 MutationObserver
,
因为图表会将它们旋转回任何 activity、
比如"on hover"。
要旋转,请向 svg 中的每个 <text>
元素添加一个 transform
属性。
在 transform
属性中,使用 --> rotate(z x y)
,其中...
z
= 旋转角度
x
= 元素的 x 坐标
y
= 元素的y坐标
x
& y
已经是元素中的属性,
所以只需要旋转值,比如--> -90
transform="rotate(-90 100 300)"
请参阅以下工作片段...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Period');
data.addColumn('number', 'Q1');
data.addColumn({type: 'string', role: 'style'});
data.addColumn({type:'string', role: 'annotation'}, '');
data.addColumn('number', 'Q2');
data.addColumn({type: 'string', role: 'style'});
data.addColumn({type:'string', role: 'annotation'}, '');
data.addColumn('number', 'Q3');
data.addColumn({type: 'string', role: 'style'});
data.addColumn({type:'string', role: 'annotation'}, '');
data.addColumn('number', 'Q4');
data.addColumn({type: 'string', role: 'style'});
data.addColumn({type:'string', role: 'annotation'}, '');
data.addRows([['DEC', 500, 'cyan', '500', 600, 'magenta', '600', 650, 'yellow', '650', 700, 'lime', '700']]);
var options = {
width: '100%',
height: '80%',
bar: {groupWidth: "90%", width: "100%", gap: "30%"},
chartArea:{width:"100%",height:"100%"},
annotations: {
highContrast: true,
style: 'point',
textStyle: {
fontName: 'Sans',
fontSize: 16,
bold: false,
italic: false,
direction:-1,
slantedText:true,
slantedTextAngle:90,
opacity: 1
}
},
legend: {
position: 'none'
}
};
var container = document.getElementById('EPSChart')
var chart = new google.visualization.ColumnChart(container);
google.visualization.events.addListener(chart, 'ready', function () {
var observer = new MutationObserver(function () {
var labels = container.getElementsByTagName('text');
Array.prototype.forEach.call(labels, function(label) {
if (label.getAttribute('text-anchor') === 'middle') {
label.setAttribute('transform', 'rotate(-90, ' + label.getAttribute('x') + ' ' + label.getAttribute('y') + ')');
}
});
});
observer.observe(container, {
childList: true,
subtree: true
});
});
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="EPSChart"></div>