Я получил ошибку "Невозможно установить свойство 'цвет' из неопределенного".Я использовал метод, чтобы получить цвет фильтра / линии в javascript, но, очевидно, он не работает при использовании jQuery.Есть ли другие способы изменить цвет фильтра / линии.
google.charts.load('current', {
// callback: drawChartYear,
packages: ['controls']
});
google.charts.setOnLoadCallback(drawChartYear);
function drawChartYear() {
var elements = document.getElementsByTagName('a')
while (elements[0]) elements[0].parentNode.removeChild(elements[0]);
var a = document.createElement('a');
a.setAttribute('href', '#');
a.innerHTML = 'Line Graph by Decades';
a.setAttribute('onClick', 'drawChartDecade()');
document.getElementById('text_div').appendChild(a);
var query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1xUzHqQjFRV3CcCEmsVUezz4hzwHDxPFW15f5Da0xBS0/edit#gid=0&headers=1&tq?range=A:AA");
query.send(handleQueryResponse);
}
function drawChartDecade() {
var elements = document.getElementsByTagName('a')
while (elements[0]) elements[0].parentNode.removeChild(elements[0]);
var a = document.createElement('a');
a.setAttribute('href', '#');
a.innerHTML = 'Line Graph by Year';
a.setAttribute('onClick', 'drawChartYear()');
document.getElementById('text_div').appendChild(a);
var query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1mX8ndZxq0lVHCpi4-LQKdut3kWgi3gYdozyxMw8fDxA/edit#gid=0");
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
var data = response.getDataTable();
var rangeFilter = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'range_filter_div',
options: {
filterColumnIndex: 0,
ui: {
chartOptions: {
chartArea: {
height: '30%',
width: '70%'
}
},
chartView: {
columns: [0, 1]
}
}
}
});
var chart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'chart_div',
options: {
legend: {
textStyle: {
fontSize: "8"
}
},
chartArea: {
width: '70%'
}
}
});
// Create the dashboard
var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));
// bind the chart to the filter
dash.bind([rangeFilter], [chart]);
// draw the dashboard
dash.draw(data);
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 = dash.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;
}
// set series option & view columns
chart.setOption('series', series);
chart.setView({
columns: columns
});
dash.draw(data);
}
}
});
$(window).resize(function() {
drawChartYear();
});
$(document).ready(function() {
var checkboxes = $(".selectall");
$('#selectall').click(function(event) {
if (this.checked) {
for (var col = 0; col < columns.length; col++) {
columns[col] = {
label: data.getColumnLabel(col),
type: data.getColumnType(col),
calc: function() {
return null;
}
}
series[col - 1].color = '#CCCCCC';
}
} else {
this.checked = false;
for (var col = 0; col < columns.length; col++) {
columns[col] = col;
series[col - 1].color = null
}
}
// set series option & view columns
chart.setOption('series', series);
chart.setView({
columns: columns
});
dash.draw(data);
});
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<div class="dashboard">
<div id="text_div"></div>
<br>
<label class="checkbox">
<input type="checkbox" id="selectall" />Deselect All</label>
<div id="chart_div" style="min-height: 550px; min-width: 700px;"></div>
<div id="range_filter_div" style="min-height: 150px; min-width: 700px;"></div>
</div>
Мой код доступен здесь https://jsfiddle.net/SnowSG/mgnwft39/