Google 图表 - 多于 1 个差异列

function drawChart() { var oldData = google.visualization.arrayToDataTable([ ['Name', 'Popularity'], ['Cesar', 250], ['Rachel', 4200], ['Patrick', 2900], ['Eric', 8200] ]); var newData = google.visualization.arrayToDataTable([ ['Name', 'Popularity'], ['Cesar', 370], ['Rachel', 600], ['Patrick', 700], ['Eric', 1500] ]); var thirdData = google.visualization.arrayToDataTable([ ['Name', 'Popularity'], ['Cesar', 100], ['Rachel', 100], ['Patrick', 100], ['Eric', 100] ]); var colChartDiff = new google.visualization.ColumnChart(document.getElementById('chart_div')); var options = { legend: { position: 'top' } }; var diffData = colChartDiff.computeDiff(oldData, newData); var diffData2 = colChartDiff.computeDiff(diffData, thirdData); colChartDiff.draw(diffData, options); console.log(diffData2); }google.load("visualization", "1", {packages:["corechart"]});google.setOnLoadCallback(drawChart);推荐答案computeDiff 方法只会计算两个数据集the computeDiff method will only evaluate two data sets一种选择是将多个图表堆叠在一起，虽然它需要一些操作...one option would be to stack multiple charts on top of each other,although it will require some manipulation...将所有图表容器放置在相同的坐标处使用单独的图表选项来更改条形的颜色和大小在所有图表上设置特定的 vAxis.viewWindow删除重复标签(数据中的 x 轴，y 轴上的刻度等...)position all the chart containers at the same coordinatesuse separate chart options to change the color and size of the barsset specific vAxis.viewWindow on all chartsremove repeated labels (x-axis in data, ticks on y-axis, etc...)请参阅以下工作片段...see following working snippets...以 3 为例google.charts.load('current', { packages: ['bar', 'controls', 'corechart']}).then(function () { var data0 = google.visualization.arrayToDataTable([ ['Name', 'Popularity 0'], ['Cesar', 250], ['Rachel', 4200], ['Patrick', 2900], ['Eric', 8200] ]); var data1 = google.visualization.arrayToDataTable([ ['Name', 'Popularity 1'], ['', 370], ['', 600], ['', 700], ['', 1500] ]); var data2 = google.visualization.arrayToDataTable([ ['Name', 'Popularity 2'], ['', 1370], ['', 1600], ['', 1700], ['', 500] ]); var options0 = { backgroundColor: 'transparent', colors: ['red'], height: 400, legend: { position: 'top' }, vAxis: { viewWindow: { min: 0, max: 10000 } }, width: 600 }; var options1 = { backgroundColor: 'transparent', bar: { groupWidth: 40 }, colors: ['blue'], height: 400, legend: { position: 'top', alignment: 'center' }, vAxis: { ticks: [{v: 0, f: ''}], viewWindow: { min: 0, max: 10000 } }, width: 600 }; var options2 = { backgroundColor: 'transparent', bar: { groupWidth: 20 }, colors: ['green'], height: 400, legend: { position: 'top', alignment: 'end' }, vAxis: { ticks: [{v: 0, f: ''}], viewWindow: { min: 0, max: 10000 } }, width: 600 }; var colChart0 = new google.visualization.ColumnChart(document.getElementById('chart_div_0')); var colChart1 = new google.visualization.ColumnChart(document.getElementById('chart_div_1')); var colChart2 = new google.visualization.ColumnChart(document.getElementById('chart_div_2')); colChart0.draw(data0, options0); colChart1.draw(data1, options1); colChart2.draw(data2, options2);});.chart { position: absolute; left: 0px; top: 0px;}<script src="https://www.gstatic.com/charts/loader.js"></script><div class="chart" id="chart_div_0"></div><div class="chart" id="chart_div_1"></div><div class="chart" id="chart_div_2"></div>以 4 为例google.charts.load('current', { packages: ['corechart']}).then(function () { var data0 = google.visualization.arrayToDataTable([ ['Name', 'Popularity 0'], ['Cesar', 250], ['Rachel', 4200], ['Patrick', 2900], ['Eric', 8200] ]); var data1 = google.visualization.arrayToDataTable([ ['Name', 'Popularity 1'], ['', 370], ['', 600], ['', 700], ['', 1500] ]); var data2 = google.visualization.arrayToDataTable([ ['Name', 'Popularity 2'], ['', 1370], ['', 1600], ['', 1700], ['', 500] ]); var data3 = google.visualization.arrayToDataTable([ ['Name', 'Popularity 3'], ['', 1070], ['', 1200], ['', 1000], ['', 900] ]); var chartColors = ['#f44336', '#9c27b0', '#2196f3', '#4caf50']; var options0 = { backgroundColor: 'transparent', colors: [chartColors[0]], height: 400, legend: { position: 'top', alignment: 'center' }, vAxis: { viewWindow: { min: 0, max: 10000 } }, width: 600 }; var options1 = { backgroundColor: 'transparent', bar: { groupWidth: 40 }, colors: [chartColors[1]], height: 400, legend: { position: 'top', alignment: 'center' }, vAxis: { ticks: [{v: 0, f: ''}], viewWindow: { min: 0, max: 10000 } }, width: 600 }; var options2 = { backgroundColor: 'transparent', bar: { groupWidth: 20 }, colors: [chartColors[2]], height: 400, legend: { position: 'top', alignment: 'center' }, vAxis: { ticks: [{v: 0, f: ''}], viewWindow: { min: 0, max: 10000 } }, width: 600 }; var options3 = { backgroundColor: 'transparent', bar: { groupWidth: 10 }, colors: [chartColors[3]], height: 400, legend: { position: 'top', alignment: 'center' }, vAxis: { ticks: [{v: 0, f: ''}], viewWindow: { min: 0, max: 10000 } }, width: 600 }; var colChart0 = new google.visualization.ColumnChart(document.getElementById('chart_div_0')); var colChart1 = new google.visualization.ColumnChart(document.getElementById('chart_div_1')); var colChart2 = new google.visualization.ColumnChart(document.getElementById('chart_div_2')); var colChart3 = new google.visualization.ColumnChart(document.getElementById('chart_div_3')); google.visualization.events.addListener(colChart0, 'ready', function () { adjustLegend(colChart0); }); google.visualization.events.addListener(colChart1, 'ready', function () { adjustLegend(colChart1); }); google.visualization.events.addListener(colChart2, 'ready', function () { adjustLegend(colChart2); }); google.visualization.events.addListener(colChart3, 'ready', function () { adjustLegend(colChart3); }); colChart0.draw(data0, options0); colChart1.draw(data1, options1); colChart2.draw(data2, options2); colChart3.draw(data3, options3); function adjustLegend(chart, index) { var chartContainer; var chartId; var chartLabels; var chartLayout = chart.getChartLayoutInterface(); var chartBounds = chartLayout.getChartAreaBoundingBox(); var labelBounds = chartLayout.getBoundingBox('legendentry#0'); var legendMarkers; var offsetX; var offsetY; switch (chart) { case colChart0: chartId = 'chart_div_0'; offsetX = labelBounds.width * -1; offsetY = labelBounds.height * -1; break; case colChart1: chartId = 'chart_div_1'; offsetX = labelBounds.width; offsetY = labelBounds.height * -1; break; case colChart2: chartId = 'chart_div_2'; offsetX = labelBounds.width * -1; offsetY = labelBounds.height; break; case colChart3: chartId = 'chart_div_3'; offsetX = labelBounds.width; offsetY = labelBounds.height; break; } chartContainer = document.getElementById(chartId); chartLabels = chartContainer.getElementsByTagName('text'); Array.prototype.forEach.call(chartLabels, function(label) { if (label.getAttribute('text-anchor') === 'start') { label.setAttribute('x', parseFloat(label.getAttribute('x')) + offsetX); label.setAttribute('y', parseFloat(label.getAttribute('y')) + offsetY); } }); legendMarkers = chartContainer.getElementsByTagName('rect'); Array.prototype.forEach.call(legendMarkers, function(rect) { if ((chartColors.indexOf(rect.getAttribute('fill')) > -1) && (parseFloat(rect.getAttribute('y')) < chartBounds.top)) { rect.setAttribute('x', parseFloat(rect.getAttribute('x')) + offsetX); rect.setAttribute('y', parseFloat(rect.getAttribute('y')) + offsetY); //console.log(chartId, rect); } }); }});.chart { position: absolute; left: 0px; top: 0px;}<script src="https://www.gstatic.com/charts/loader.js"></script><div class="chart" id="chart_div_0"></div><div class="chart" id="chart_div_1"></div><div class="chart" id="chart_div_2"></div><div class="chart" id="chart_div_3"></div> 这篇关于Google 图表 - 多于 1 个差异列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！