谷歌图表图表设置图例值和相同的颜色列

data = [[“product1”，3.6126719999999977]，[“product2”，6.827597999999999]，[“product2”，1008.0]]当我使用数组数据并在列或条形图中实现时间显示为图例值而不是’不同产品名称’和所有条形图看起来都是相同的颜色列。 我想将图例名称作为产品名称和不同颜色添加到所有列

google.charts.load('current', { packages: ['corechart'] }).then(function () { $.ajax({ url: 'path to data', dataType: 'json' }).done(function (jsonData) { loadData(jsonData); }).fail(function (jqXHR, textStatus, errorThrown) { var jsonData = [["product1",450],["product2",23],["product3",1008.0]]; loadData(jsonData, '1', 'Column'); }); // load json data function loadData(jsonData, id, chartType) { // create data table var dataTable = new google.visualization.DataTable(); switch (chartType) { case 'Column': // add date column dataTable.addColumn('string', 'Product'); dataTable.addColumn('number', 'Value'); $.each(jsonData, function(productIndex, product) { // add product data dataTable.addRow([ product[0], product[1], ]); }); break; } // draw chart $(window).resize(function () { drawChart(id, chartType, dataTable); }); drawChart(id, chartType, dataTable); } // save charts for redraw var charts = {}; var options = { Column: { chartArea: { height: '100%', width: '100%', top: 64, left: 64, right: 32, bottom: 48 }, height: '100%', legend: { position: 'top' }, pointSize: 4, width: '100%' }, Pie: { height: '100%', width: '100%' }, Line: { height: '100%', width: '100%', legend: { position: 'bottom' }, pointSize: 4, width: '100%' } }; // draw chart function drawChart(id, chartType, dataTable) { if (!charts.hasOwnProperty(id)) { charts[id] = new google.visualization.ChartWrapper({ chartType: chartType + 'Chart', containerId: 'chart-' + id, options: options[chartType] }); } charts[id].setDataTable(dataTable); charts[id].draw(); } }); 

  html, body { height: 100%; margin: 0px 0px 0px 0px; overflow: hidden; padding: 0px 0px 0px 0px; } .chart { display: inline-block; height: 100%; width: 32%; } 

Answer 1

在这种情况下，您想为每个产品创建列 ，
而不是每个产品的行 …

请参阅以下工作代码段…

 google.charts.load('current', { packages: ['corechart'] }).then(function () { // save charts for redraw var charts = {}; var options = { Column: { chartArea: { height: '100%', width: '100%', top: 64, left: 64, right: 32, bottom: 48 }, height: '100%', legend: { position: 'top' }, pointSize: 4, width: '100%' }, Pie: { height: '100%', width: '100%' }, Line: { height: '100%', width: '100%', legend: { position: 'bottom' }, pointSize: 4, width: '100%' } }; var jsonData = [["product1",450],["product2",23],["product3",1008.0]]; loadData(jsonData, '1', 'Column'); // load json data function loadData(jsonData, id, chartType) { // create data table var dataTable = new google.visualization.DataTable(); switch (chartType) { case 'Column': // add date column dataTable.addColumn('string', 'Category'); var rowIndex = dataTable.addRow(); dataTable.setValue(rowIndex, 0, dataTable.getColumnLabel(0)); $.each(jsonData, function(productIndex, product) { var colIndex = dataTable.addColumn('number', product[0]); // add product data dataTable.setValue(rowIndex, colIndex, product[1]); }); break; } // draw chart $(window).resize(function () { drawChart(id, chartType, dataTable); }); drawChart(id, chartType, dataTable); } // draw chart function drawChart(id, chartType, dataTable) { if (!charts.hasOwnProperty(id)) { charts[id] = new google.visualization.ChartWrapper({ chartType: chartType + 'Chart', containerId: 'chart-' + id, options: options[chartType] }); } charts[id].setDataTable(dataTable); charts[id].draw(); } }); 

 html, body { height: 100%; margin: 0px 0px 0px 0px; overflow: hidden; padding: 0px 0px 0px 0px; } .chart { height: 100%; }