大家好我想要创建Google图表，但是像ticks:这样的问题会像[0, -50000, -100000, -150000, -200000]一样添加...它工作正常，但只添加范围为500000并设置自动滴答。 ..提前致谢。
google.load('visualization', '1', {packages: ['corechart', 'line']});
google.setOnLoadCallback(drawBackgroundColor);
function drawBackgroundColor() {
var data = new google.visualization.DataTable();
var amount_array = [];
//data.addColumn('number', 'Dogs');
data.addColumn('date', 'Product');
data.addColumn('number', 'Amount');
data.addRows([
[ new Date(2015,4,20),-199525],
[ new Date(2015,4,27),-195930],
[ new Date(2015,5,17),-175720],
[ new Date(2015,7,05),-189725],
[ new Date(2015,8,11),-174875],
[ new Date(2015,8,30),-170819],
[ new Date(2015,9,07),-176488],
[ new Date(2015,9,21),-188950],
[ new Date(2015,9,28),-190418],
[ new Date(2015,10,05),-183461],
[ new Date(2015,10,12),-189215],
[ new Date(2015,10,18),-192451],
[ new Date(2015,10,26),-184334],
[ new Date(2015,11,03),-191307],
[ new Date(2015,11,09),-188478],
[ new Date(2015,11,16),-194779],
[ new Date(2016,0,06),-218751],
[ new Date(2016,0,20),-226485],
]);
amount_array[0] = '-199.5k';
amount_array[1] = '-195.9k';
amount_array[2] = '-175.7k';
amount_array[3] = '-189.7k';
amount_array[4] = '-174.8k';
amount_array[5] = '-170.8k';
amount_array[6] = '-176.4k';
amount_array[7] = '-188.9k';
amount_array[8] = '-190.4k';
amount_array[9] = '-183.4k';
amount_array[10] = '-189.2k';
amount_array[11] = '-192.4k';
amount_array[12] = '-184.3k';
amount_array[13] = '-191.3k';
amount_array[14] = '-188.4k';
amount_array[15] = '-194.7k';
amount_array[16] = '-218.7k';
amount_array[17] = '-226.4k';
// custom format data values
for (var i = 0; i < data.getNumberOfRows(); i++) {
data.setFormattedValue(i, 1, amount_array[i]);
}
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
var options = {
hAxis: {
title: '',
gridlineColor: '#fff',
textPosition: 'none',
},
vAxis: {
title: '',
textStyle: {
color: '#a7b3bc',
fontSize: 14,
bold: true,
},
ticks: [0, -50000, -100000, -150000, -200000],
},
backgroundColor: '#fff',
series: {
0: { color: '#5cbd60' }
},
pointSize: 2,
baselineColor: '#e6e6e6',
legend: {position: 'none'},
chartArea: {
backgroundColor: {
stroke: '#e6e6e6',
strokeWidth: 1
},
width: 330,
height: 155,
top:20,
bottom:20
},
width: 430,
height : 200
};
// get the axis values and reformat them
var runOnce = google.visualization.events.addListener(chart, 'ready', function () {
google.visualization.events.removeListener(runOnce);
var bb, val, formattedVal, suffix, ticks = [], cli = chart.getChartLayoutInterface();
for (var i = 0; bb = cli.getBoundingBox('vAxis#0#gridline#' + i); i++) {
val = cli.getVAxisValue(bb.top);
if (val != parseInt(val)) {
val = cli.getVAxisValue(bb.top + bb.height / 2);
}
// convert from base-10 counting to 2^10 counting
for (var n = 0; val >= 1000; n++) {
//val /= 1000;
val = val / 1000;
}
formattedVal = val;
val *= Math.pow(1000, n);
switch (n) {
case 0:
suffix = '$-';
break;
case 1:
suffix = 'K';
break;
case 2:
suffix = 'M';
break;
case 3:
suffix = 'G';
break;
case 4:
suffix = 'T';
break;
default:
while (n > 4) {
formattedVal *= 1000;
n--;
}
suffix = 'k'
}
if(formattedVal >= 1){
ticks.push({v: val, f: Math.round(formattedVal) + suffix});
}
else if(formattedVal < 0){
var formattedVal1 = formattedVal / 1000;
ticks.push({v: val, f: Math.round(formattedVal1) + 'K'});
}
else{
ticks.push({v: val, f: suffix});
}
}
options.vAxis = options.vAxis || {};
options.vAxis.ticks = ticks;
chart.draw(data, options);
});
chart.draw(data, options);
}<script src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
答案 0 :(得分：0)
您可以通过指定min，max和interval参数来生成ticks，如下所示：
function calcIntTicks(dataTable, options) {
var min = options.hasOwnProperty("min") ? options.min : Math.floor(dataTable.getColumnRange(1).min);
var max = options.hasOwnProperty("max") ? options.max : Math.ceil(dataTable.getColumnRange(1).max);
var vals = [];
for (var cur = min; cur <= max; cur += options.interval) {
vals.push(cur);
}
return vals;
}
修改后的示例
google.load('visualization', '1', { packages: ['corechart', 'line'] });
google.setOnLoadCallback(drawBackgroundColor);
function drawBackgroundColor() {
var data = new google.visualization.DataTable();
var amount_array = [];
//data.addColumn('number', 'Dogs');
data.addColumn('date', 'Product');
data.addColumn('number', 'Amount');
data.addRows([
[new Date(2015, 4, 20), -199525],
[new Date(2015, 4, 27), -195930],
[new Date(2015, 5, 17), -175720],
[new Date(2015, 7, 05), -189725],
[new Date(2015, 8, 11), -174875],
[new Date(2015, 8, 30), -170819],
[new Date(2015, 9, 07), -176488],
[new Date(2015, 9, 21), -188950],
[new Date(2015, 9, 28), -190418],
[new Date(2015, 10, 05), -183461],
[new Date(2015, 10, 12), -189215],
[new Date(2015, 10, 18), -192451],
[new Date(2015, 10, 26), -184334],
[new Date(2015, 11, 03), -191307],
[new Date(2015, 11, 09), -188478],
[new Date(2015, 11, 16), -194779],
[new Date(2016, 0, 06), -218751],
[new Date(2016, 0, 20), -226485],
]);
amount_array[0] = '-199.5k';
amount_array[1] = '-195.9k';
amount_array[2] = '-175.7k';
amount_array[3] = '-189.7k';
amount_array[4] = '-174.8k';
amount_array[5] = '-170.8k';
amount_array[6] = '-176.4k';
amount_array[7] = '-188.9k';
amount_array[8] = '-190.4k';
amount_array[9] = '-183.4k';
amount_array[10] = '-189.2k';
amount_array[11] = '-192.4k';
amount_array[12] = '-184.3k';
amount_array[13] = '-191.3k';
amount_array[14] = '-188.4k';
amount_array[15] = '-194.7k';
amount_array[16] = '-218.7k';
amount_array[17] = '-226.4k';
// custom format data values
for (var i = 0; i < data.getNumberOfRows() ; i++) {
data.setFormattedValue(i, 1, amount_array[i]);
}
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
var options = {
hAxis: {
title: '',
gridlineColor: '#fff',
textPosition: 'none',
},
vAxis: {
title: '',
textStyle: {
color: '#a7b3bc',
fontSize: 14,
bold: true,
},
//ticks: [0, -50000, -100000, -150000, -200000],
ticks: calcIntTicks(data, { min: -200000, max: 0, interval: 50000 })
},
backgroundColor: '#fff',
series: {
0: { color: '#5cbd60' }
},
pointSize: 2,
baselineColor: '#e6e6e6',
legend: { position: 'none' },
chartArea: {
backgroundColor: {
stroke: '#e6e6e6',
strokeWidth: 1
},
width: 330,
height: 155,
top: 20,
bottom: 20
},
width: 430,
height: 200
};
// get the axis values and reformat them
var runOnce = google.visualization.events.addListener(chart, 'ready', function () {
google.visualization.events.removeListener(runOnce);
var bb, val, formattedVal, suffix, ticks = [], cli = chart.getChartLayoutInterface();
for (var i = 0; bb = cli.getBoundingBox('vAxis#0#gridline#' + i) ; i++) {
val = cli.getVAxisValue(bb.top);
if (val != parseInt(val)) {
val = cli.getVAxisValue(bb.top + bb.height / 2);
}
// convert from base-10 counting to 2^10 counting
for (var n = 0; val >= 1000; n++) {
//val /= 1000;
val = val / 1000;
}
formattedVal = val;
val *= Math.pow(1000, n);
switch (n) {
case 0:
suffix = '$-';
break;
case 1:
suffix = 'K';
break;
case 2:
suffix = 'M';
break;
case 3:
suffix = 'G';
break;
case 4:
suffix = 'T';
break;
default:
while (n > 4) {
formattedVal *= 1000;
n--;
}
suffix = 'k'
}
if (formattedVal >= 1) {
ticks.push({ v: val, f: Math.round(formattedVal) + suffix });
}
else if (formattedVal < 0) {
var formattedVal1 = formattedVal / 1000;
ticks.push({ v: val, f: Math.round(formattedVal1) + 'K' });
}
else {
ticks.push({ v: val, f: suffix });
}
}
options.vAxis = options.vAxis || {};
options.vAxis.ticks = ticks;
chart.draw(data, options);
});
chart.draw(data, options);
}
function calcIntTicks(dataTable, options) {
var min = options.hasOwnProperty("min") ? options.min : Math.floor(dataTable.getColumnRange(1).min);
var max = options.hasOwnProperty("max") ? options.max : Math.ceil(dataTable.getColumnRange(1).max);
var vals = [];
for (var cur = min; cur <= max; cur += options.interval) {
vals.push(cur);
}
return vals;
}<script src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>