2014-04-04 60 views
4

我有一个如何使饼图与表交互的工作示例。我想添加的是它们相关性的视觉提示。我见过的唯一例子是表格行被adding a listener突出显示的地方。我想在表格中添加一个空单元格,其背景颜色就是它所对应的饼图片的颜色。我如何捕捉饼图的颜色? JSFiddle如何捕获Google Charts饼图切片的颜色值?

我现在拥有的一切:

google.load("visualization", "1", {packages:["corechart","table"]}); 
    google.setOnLoadCallback(drawProductAllocationChart); 
    function drawProductAllocationChart() { 
    var data = google.visualization.arrayToDataTable([ 
     ['Name', 'Allocation'], 
     ['Product A', 25], 
     ['Product B', 50], 
     ['Product C', 15], 
     ['Product D', 10] 
    ]); 

    var options = { 
     //title: 'My Daily Activities' 
     is3D: true 
    }; 

    var productAllocationChart = new google.visualization.PieChart(document.getElementById('product-allocation-chart')); 
    productAllocationChart.draw(data, options); 

    var productAllocationTable = new google.visualization.Table(document.getElementById('product-allocation-table')); 
    productAllocationTable.draw(data, null); 

    // When the table is selected, update the orgchart. 
    google.visualization.events.addListener(productAllocationTable, 'select', function() { 
     portfolioAllocationChart.setSelection(productAllocationTable.getSelection()); 
    }); 

    // When the orgchart is selected, update the table visualization. 
    google.visualization.events.addListener(productAllocationChart, 'select', function() { 
     productAllocationTable.setSelection(productAllocationChart.getSelection()); 
    }); 
    } 

谢谢!

+0

有没有为单元格设置背景颜色的选项?我没有在文档中看到它,但它只是一个快速的样子。 – EnigmaRM

+0

@hoyasultan。我相信以下答案可以解决您的问题。你能将它标记为已回答吗? –

回答

3

我的第一个想法是为Google图表创建一个默认颜色的地图。尽管如此,我还没有使用可视化API的数据表。

Google Group我得到了31默认颜色这份名单:

["#3366cc","#dc3912","#ff9900","#109618","#990099","#0099c6","#dd4477","#66aa00","#b82e2e","#316395","#994499","#22aa99","#aaaa11","#6633cc","#e67300","#8b0707","#651067","#329262","#5574a6","#3b3eac","#b77322","#16d620","#b91383","#f4359e","#9c5935","#a9c413","#2a778d","#668d1c","#bea413","#0c5922","#743411"] 

我假设你知道为了使事情被添加到饼图,它最可能对应于行内的顺序桌子。如果是这种情况,那么只需将数组映射到该行即可。

+0

已经离开了几天,感谢@EnigmaRM,我打算给出一个 – hoyasultan

+0

我没有使用表格的可视化。你能设置一个单元格的背景颜色吗? – EnigmaRM

+0

@EnigmaRM如果此答案解决了您的问题,则应将其标记为“已回答”。 –

相关问题