隐藏系列时重新缩放 google 折线图 X 轴
Rescale google line chart X axis when a series is hidden
当使用此代码单击图例时，我在 google 折线图中 hiding/showing 系列：
var columns = [];
var series = {};
for (var i = 0; i < data.getNumberOfColumns(); i++) {
columns.push(i);
if (i > 0) {
series[i - 1] = {};
}
}
google.visualization.events.addListener(chart, 'select', function () {
var sel = chart.getSelection();
// if selection length is 0, we deselected an element
if (sel.length > 0) {
// if row is undefined, we clicked on the legend
if (sel[0].row === null) {
var col = sel[0].column;
if (columns[col] == col) {
// hide the data series
columns[col] = {
label: data.getColumnLabel(col),
type: data.getColumnType(col),
calc: function () {
return null;
}
};
// grey out the legend entry
series[col - 1].color = '#CCCCCC';
}
else {
// show the data series
columns[col] = col;
series[col - 1].color = null;
}
var view = new google.visualization.DataView(data);
view.setColumns(columns);
chart.draw(view, burndown_options);
}
}
});
隐藏系列时，Y 轴会自动重新缩放。有没有办法让 X 轴重新缩放？
这是一个包含我的代码和数据的 jsfiddle：http://jsfiddle.net/LarryMartell/my906Lw2/5/
尽管可以通过返回 null、
将列排除在视图中
所有行仍然存在，
这就是 x 轴不变的原因。
我们必须排除所有值为空的行，
为了重新缩放 x 轴。
// exclude rows where all columns = null
var rows = [];
var validRow;
for (var r = 0; r < view.getNumberOfRows(); r++) {
validRow = null;
for (var c = 1; c < view.getNumberOfColumns(); c++) {
validRow = validRow || view.getValue(r, c);
}
if (validRow !== null) {
rows.push(r);
}
}
view.setRows(rows);
请参阅以下工作片段...
google.charts.load('current', {
packages: ['corechart']
}).then(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Day');
data.addColumn('number', 'S1');
data.addColumn('number', 'S2');
data.addColumn('number', 'S3');
data.addColumn('number', 'S4');
data.addColumn('number', 'S5');
data.addColumn('number', 'S6');
var rows = [
["Nov 2019", null, null, 92617.19, null, 92617.19, null],
["Dec 2019", null, null, 92617.19, null, 92617.19, null],
["Jan 2020", 3251.84, 16259.2, 92617.19, 2002.02, 94619.2, null],
["Feb 2020", 3251.84, 16259.2, 92617.19, 4004.03, 96621.22, null],
["Mar 2020", 6503.68, 32518.4, 92617.19, 8008.06, 100625.25, null],
["Apr 2020", 6503.68, 32518.4, 92617.19, 12012.1, 104629.28, null],
["May 2020", 6503.68, 32518.4, 83355.47, 16016.13, 99371.59, null],
["Jun 2020", 13007.36, 65036.81, 74093.75, 24024.19, 98117.94, null],
["Jul 2020", 13007.36, 65036.81, 64832.03, 32032.26, 96864.29, null],
["Aug 2020", 13007.36, 65036.81, 55570.31, 40040.32, 95610.63, null],
["Sep 2020", 13007.36, 65036.81, 46308.59, 48048.38, 94356.98, null],
["Oct 2020", 13007.36, 65036.81, 37046.87, 56056.45, 93103.32, null],
["Nov 2020", 13007.36, 65036.81, 18523.44, 64064.51, 82587.95, null],
["Dec 2020", 13007.36, 65036.81, 13892.58, 72072.58, 85965.15, null],
["Jan 2021", 13007.36, 65036.81, 11114.06, 80080.64, 91194.7, null],
["Feb 2021", null, null, null, 80080.64, null, 650368.08],
["Mar 2021", null, null, null, 80080.64, null, 637831.53],
["Apr 2021", null, null, null, 80080.64, null, 625294.99],
["May 2021", null, null, null, 80080.64, null, 612758.44],
["Jun 2021", null, null, null, 80080.64, null, 600221.89],
["Jul 2021", null, null, null, 80080.64, null, 587685.35],
["Aug 2021", null, null, null, 80080.64, null, 575148.8],
["Sep 2021", null, null, null, 80080.64, null, 562612.26],
["Oct 2021", null, null, null, 80080.64, null, 550075.71],
["Nov 2021", null, null, null, 80080.64, null, 537539.16],
["Dec 2021", null, null, null, 80080.64, null, 525002.62],
["Jan 2022", null, null, null, 80080.64, null, 512466.07],
["Feb 2022", null, null, null, 80080.64, null, 499929.52],
["Mar 2022", null, null, null, 80080.64, null, 487392.98],
["Apr 2022", null, null, null, 80080.64, null, 474856.43],
["May 2022", null, null, null, 80080.64, null, 462319.89],
["Jun 2022", null, null, null, 80080.64, null, 449783.34],
["Jul 2022", null, null, null, 80080.64, null, 437246.79],
["Aug 2022", null, null, null, 80080.64, null, 424710.25],
["Sep 2022", null, null, null, 80080.64, null, 412173.7],
["Oct 2022", null, null, null, 80080.64, null, 399637.15],
["Nov 2022", null, null, null, 80080.64, null, 387100.61],
["Dec 2022", null, null, null, 80080.64, null, 374564.06],
["Jan 2023", null, null, null, 80080.64, null, 362027.52],
["Feb 2023", null, null, null, 80080.64, null, 349490.97],
["Mar 2023", null, null, null, 80080.64, null, 336954.42],
["Apr 2023", null, null, null, 80080.64, null, 324417.88],
["May 2023", null, null, null, 80080.64, null, 311881.33],
["Jun 2023", null, null, null, 80080.64, null, 299344.78],
["Jul 2023", null, null, null, 80080.64, null, 286808.24],
["Aug 2023", null, null, null, 80080.64, null, 274271.69],
["Sep 2023", null, null, null, 80080.64, null, 261735.14],
["Oct 2023", null, null, null, 80080.64, null, 249198.6],
["Nov 2023", null, null, null, 80080.64, null, 236662.05],
["Dec 2023", null, null, null, 80080.64, null, 224125.51],
["Jan 2024", null, null, null, 80080.64, null, 211588.96],
["Feb 2024", null, null, null, 80080.64, null, 199052.41]
];
data.addRows(rows);
options = {
hAxis: {
title: '',
slantedText: true,
slantedTextAngle: 90
},
vAxis: {
title: '',
format: '$#,###'
},
title: "",
width: 800,
height: 500,
isStacked: "true",
pointSize: 5,
legend: {
position: 'bottom'
},
interpolateNulls: true,
vAxis: {
format: 'currency'
}
};
chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
var columns = [];
var series = {};
for (var i = 0; i < data.getNumberOfColumns(); i++) {
columns.push(i);
if (i > 0) {
series[i - 1] = {};
}
}
options['series'] = series;
google.visualization.events.addListener(chart, 'select', function() {
var sel = chart.getSelection();
// if selection length is 0, we deselected an element
if (sel.length > 0) {
// if row is undefined, we clicked on the legend
if (sel[0].row === null) {
var col = sel[0].column;
if (columns[col] == col) {
// hide the data series
columns[col] = {
label: data.getColumnLabel(col),
type: data.getColumnType(col),
calc: function() {
return null;
}
};
// grey out the legend entry
series[col - 1].color = '#CCCCCC';
} else {
// show the data series
columns[col] = col;
series[col - 1].color = null;
}
var view = new google.visualization.DataView(data);
view.setColumns(columns);
// exclude rows where all columns = null
var rows = [];
var validRow;
for (var r = 0; r < view.getNumberOfRows(); r++) {
validRow = null;
for (var c = 1; c < view.getNumberOfColumns(); c++) {
validRow = validRow || view.getValue(r, c);
}
if (validRow !== null) {
rows.push(r);
}
}
view.setRows(rows);
chart.draw(view, options);
}
}
});
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
注意： jsfiddle 使用旧版本的 google 图表。
jsapi 加载程序已过时，不应再使用。
改为使用loader.js，这只会改变load语句。
见上面的片段...
当使用此代码单击图例时，我在 google 折线图中 hiding/showing 系列：
var columns = [];
var series = {};
for (var i = 0; i < data.getNumberOfColumns(); i++) {
columns.push(i);
if (i > 0) {
series[i - 1] = {};
}
}
google.visualization.events.addListener(chart, 'select', function () {
var sel = chart.getSelection();
// if selection length is 0, we deselected an element
if (sel.length > 0) {
// if row is undefined, we clicked on the legend
if (sel[0].row === null) {
var col = sel[0].column;
if (columns[col] == col) {
// hide the data series
columns[col] = {
label: data.getColumnLabel(col),
type: data.getColumnType(col),
calc: function () {
return null;
}
};
// grey out the legend entry
series[col - 1].color = '#CCCCCC';
}
else {
// show the data series
columns[col] = col;
series[col - 1].color = null;
}
var view = new google.visualization.DataView(data);
view.setColumns(columns);
chart.draw(view, burndown_options);
}
}
});
隐藏系列时，Y 轴会自动重新缩放。有没有办法让 X 轴重新缩放？
这是一个包含我的代码和数据的 jsfiddle：http://jsfiddle.net/LarryMartell/my906Lw2/5/
尽管可以通过返回 null、
将列排除在视图中
所有行仍然存在，
这就是 x 轴不变的原因。
我们必须排除所有值为空的行，
为了重新缩放 x 轴。
// exclude rows where all columns = null
var rows = [];
var validRow;
for (var r = 0; r < view.getNumberOfRows(); r++) {
validRow = null;
for (var c = 1; c < view.getNumberOfColumns(); c++) {
validRow = validRow || view.getValue(r, c);
}
if (validRow !== null) {
rows.push(r);
}
}
view.setRows(rows);
请参阅以下工作片段...
google.charts.load('current', {
packages: ['corechart']
}).then(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Day');
data.addColumn('number', 'S1');
data.addColumn('number', 'S2');
data.addColumn('number', 'S3');
data.addColumn('number', 'S4');
data.addColumn('number', 'S5');
data.addColumn('number', 'S6');
var rows = [
["Nov 2019", null, null, 92617.19, null, 92617.19, null],
["Dec 2019", null, null, 92617.19, null, 92617.19, null],
["Jan 2020", 3251.84, 16259.2, 92617.19, 2002.02, 94619.2, null],
["Feb 2020", 3251.84, 16259.2, 92617.19, 4004.03, 96621.22, null],
["Mar 2020", 6503.68, 32518.4, 92617.19, 8008.06, 100625.25, null],
["Apr 2020", 6503.68, 32518.4, 92617.19, 12012.1, 104629.28, null],
["May 2020", 6503.68, 32518.4, 83355.47, 16016.13, 99371.59, null],
["Jun 2020", 13007.36, 65036.81, 74093.75, 24024.19, 98117.94, null],
["Jul 2020", 13007.36, 65036.81, 64832.03, 32032.26, 96864.29, null],
["Aug 2020", 13007.36, 65036.81, 55570.31, 40040.32, 95610.63, null],
["Sep 2020", 13007.36, 65036.81, 46308.59, 48048.38, 94356.98, null],
["Oct 2020", 13007.36, 65036.81, 37046.87, 56056.45, 93103.32, null],
["Nov 2020", 13007.36, 65036.81, 18523.44, 64064.51, 82587.95, null],
["Dec 2020", 13007.36, 65036.81, 13892.58, 72072.58, 85965.15, null],
["Jan 2021", 13007.36, 65036.81, 11114.06, 80080.64, 91194.7, null],
["Feb 2021", null, null, null, 80080.64, null, 650368.08],
["Mar 2021", null, null, null, 80080.64, null, 637831.53],
["Apr 2021", null, null, null, 80080.64, null, 625294.99],
["May 2021", null, null, null, 80080.64, null, 612758.44],
["Jun 2021", null, null, null, 80080.64, null, 600221.89],
["Jul 2021", null, null, null, 80080.64, null, 587685.35],
["Aug 2021", null, null, null, 80080.64, null, 575148.8],
["Sep 2021", null, null, null, 80080.64, null, 562612.26],
["Oct 2021", null, null, null, 80080.64, null, 550075.71],
["Nov 2021", null, null, null, 80080.64, null, 537539.16],
["Dec 2021", null, null, null, 80080.64, null, 525002.62],
["Jan 2022", null, null, null, 80080.64, null, 512466.07],
["Feb 2022", null, null, null, 80080.64, null, 499929.52],
["Mar 2022", null, null, null, 80080.64, null, 487392.98],
["Apr 2022", null, null, null, 80080.64, null, 474856.43],
["May 2022", null, null, null, 80080.64, null, 462319.89],
["Jun 2022", null, null, null, 80080.64, null, 449783.34],
["Jul 2022", null, null, null, 80080.64, null, 437246.79],
["Aug 2022", null, null, null, 80080.64, null, 424710.25],
["Sep 2022", null, null, null, 80080.64, null, 412173.7],
["Oct 2022", null, null, null, 80080.64, null, 399637.15],
["Nov 2022", null, null, null, 80080.64, null, 387100.61],
["Dec 2022", null, null, null, 80080.64, null, 374564.06],
["Jan 2023", null, null, null, 80080.64, null, 362027.52],
["Feb 2023", null, null, null, 80080.64, null, 349490.97],
["Mar 2023", null, null, null, 80080.64, null, 336954.42],
["Apr 2023", null, null, null, 80080.64, null, 324417.88],
["May 2023", null, null, null, 80080.64, null, 311881.33],
["Jun 2023", null, null, null, 80080.64, null, 299344.78],
["Jul 2023", null, null, null, 80080.64, null, 286808.24],
["Aug 2023", null, null, null, 80080.64, null, 274271.69],
["Sep 2023", null, null, null, 80080.64, null, 261735.14],
["Oct 2023", null, null, null, 80080.64, null, 249198.6],
["Nov 2023", null, null, null, 80080.64, null, 236662.05],
["Dec 2023", null, null, null, 80080.64, null, 224125.51],
["Jan 2024", null, null, null, 80080.64, null, 211588.96],
["Feb 2024", null, null, null, 80080.64, null, 199052.41]
];
data.addRows(rows);
options = {
hAxis: {
title: '',
slantedText: true,
slantedTextAngle: 90
},
vAxis: {
title: '',
format: '$#,###'
},
title: "",
width: 800,
height: 500,
isStacked: "true",
pointSize: 5,
legend: {
position: 'bottom'
},
interpolateNulls: true,
vAxis: {
format: 'currency'
}
};
chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
var columns = [];
var series = {};
for (var i = 0; i < data.getNumberOfColumns(); i++) {
columns.push(i);
if (i > 0) {
series[i - 1] = {};
}
}
options['series'] = series;
google.visualization.events.addListener(chart, 'select', function() {
var sel = chart.getSelection();
// if selection length is 0, we deselected an element
if (sel.length > 0) {
// if row is undefined, we clicked on the legend
if (sel[0].row === null) {
var col = sel[0].column;
if (columns[col] == col) {
// hide the data series
columns[col] = {
label: data.getColumnLabel(col),
type: data.getColumnType(col),
calc: function() {
return null;
}
};
// grey out the legend entry
series[col - 1].color = '#CCCCCC';
} else {
// show the data series
columns[col] = col;
series[col - 1].color = null;
}
var view = new google.visualization.DataView(data);
view.setColumns(columns);
// exclude rows where all columns = null
var rows = [];
var validRow;
for (var r = 0; r < view.getNumberOfRows(); r++) {
validRow = null;
for (var c = 1; c < view.getNumberOfColumns(); c++) {
validRow = validRow || view.getValue(r, c);
}
if (validRow !== null) {
rows.push(r);
}
}
view.setRows(rows);
chart.draw(view, options);
}
}
});
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
注意： jsfiddle 使用旧版本的 google 图表。
jsapi 加载程序已过时，不应再使用。
改为使用loader.js，这只会改变load语句。
见上面的片段...