更改tick中的颜色Google图表
__HELLO,伙计们。我正在Google图表中练习。我遇到了一个问题,我无法解决。 Google图表
我正在使用ticks标签:
'vaxis':{ tick:[{v:720,f:'12:00'}
,想在tick标签中自定义两个值的颜色:
data.addRow(
['{{list[i][0]}}',
{ v: {{list[i][1][0]}}, f: '{{list[i][1][1]}} {**color: #335408**}Yest: + {{list[i][2]}}' }]
我该怎么做?
upd1:
<link rel="stylesheet" href="/static/main.css">
<script src="https://www.google.com/jsapi"></script>
<script>
// var list = {{ list|safe }}
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['', 'May'],
['', 0]
]);
{% for i in range(list|length) %}
data.addRow(
['{{list[i][0]}}',
{ v: {{list[i][1][0]}}, f: '{{list[i][1][1]}}' + '\n' + 'Yest: +{{list[i][2]}}' }]
);
{% endfor %}
var options = {
title: 'Current month',
hAxis: {title: ''},
vAxis: {title: 'H:Min'},
width: 1080,
'vAxis': {
ticks: [{ v: 720, f: '12:00' }, { v: 1440, f: '24:00' }, { v: 2160, f: '36:00' }, { v: 2880, f: '48:00' }, { v: 3600, f: '60:00'}, { v: 4320, f: '72:00'}, { v: 5040, f: '84:00'}, { v: 5760, f: '96:00'}, { v: 6480, f: '108:00'}, { v: 7200, f: '120:00'}, { v: 7920, f: '132:00'}]
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('oil'));
chart.draw(data, options);
}
__Hello, guys. I'm practicing in google charts. And I met a problem, which I can't to solve.
google chart
I'm using ticks labels:
'vAxis': {
ticks: [{ v: 720, f: '12:00' }
And want to customize colors for two values in tick label:
data.addRow(
['{{list[i][0]}}',
{ v: {{list[i][1][0]}}, f: '{{list[i][1][1]}} {**color: #335408**}Yest: + {{list[i][2]}}' }]
How can I do this?
Upd1:
<link rel="stylesheet" href="/static/main.css">
<script src="https://www.google.com/jsapi"></script>
<script>
// var list = {{ list|safe }}
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['', 'May'],
['', 0]
]);
{% for i in range(list|length) %}
data.addRow(
['{{list[i][0]}}',
{ v: {{list[i][1][0]}}, f: '{{list[i][1][1]}}' + '\n' + 'Yest: +{{list[i][2]}}' }]
);
{% endfor %}
var options = {
title: 'Current month',
hAxis: {title: ''},
vAxis: {title: 'H:Min'},
width: 1080,
'vAxis': {
ticks: [{ v: 720, f: '12:00' }, { v: 1440, f: '24:00' }, { v: 2160, f: '36:00' }, { v: 2880, f: '48:00' }, { v: 3600, f: '60:00'}, { v: 4320, f: '72:00'}, { v: 5040, f: '84:00'}, { v: 5760, f: '96:00'}, { v: 6480, f: '108:00'}, { v: 7200, f: '120:00'}, { v: 7920, f: '132:00'}]
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('oil'));
chart.draw(data, options);
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论