在jQuery中獲取類別過濾器顏色的方法

Question

我收到錯誤消息“無法設置未定義的屬性'顏色'”。 我使用了一種方法來獲取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/

Answer 1

並不是說您分配顏色的方式不起作用，而是series [col-1]不存在。 在#selectall處理程序中，當col = 0時，您正在尋找series [-1];

在col> 0的條件下，在if塊中查看其運行方式。您可能需要適當地修改for循環。

 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; } } if(col > 0) { series[col - 1].color = '#CCCCCC'; } }; } else { this.checked = false; for (var col = 0; col < columns.length; col++) { columns[col] = col; if(col > 0) { 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/2.1.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>