谷歌图表 - 获取行的颜色

Posted

技术标签:

【中文标题】谷歌图表 - 获取行的颜色【英文标题】:Google chart - get color for row 【发布时间】:2012-06-19 05:34:36 【问题描述】:

我有一个包含很多元素的饼图。 我已经将颜色选择留给了谷歌图表,但是在绘制图表之后,我需要检索每一行的颜色。

我知道我可以生成颜色数组,并将其设置在图表选项中,这将解决我的问题,我将能够从那里检索颜色。但是我真的不想手动创建那么大的数组。

那么有没有办法获取给定行的颜色?

谢谢!

【问题讨论】:

【参考方案1】:

我不熟悉 Google 饼图,但我有一个基本的 javascript 建议给你。也许这有帮助。如果你有一个画布图像,你可以使用 JavaScript 像素选取方法,类似于我使用的以下方法:

//get the image
var sampleImage = document.getElementById("checkimg");
//convert the image to canvas
function convertImageToCanvas(image) 
    var canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;
    canvas.getContext("2d").drawImage(image, 0, 0);
    return canvas;

var canvas = convertImageToCanvas(sampleImage);
sampleImage.style.display = 'none';
//real position functions
function absleft(el) 
    return (el.offsetParent) ? el.offsetLeft+absleft(el.offsetParent) : el.offsetLeft;

function abstop(el) 
    return (el.offsetParent) ? el.offsetTop+abstop(el.offsetParent) : el.offsetTop;

canvas.onclick = function(event) 
    //get real position
    if (event.hasOwnProperty('offsetX')) 
        var x = event.offsetX;
        var y = event.offsetY;
    
    else 
        var x = event.layerX - absleft(canvas);
        var y = event.layerY - abstop(canvas);
    
    //get the pixel data
    var pixelData = this.getContext('2d').getImageData(x, y, 1, 1).data;

document.getElementById("temp").appendChild(canvas);

【讨论】:

以上是关于谷歌图表 - 获取行的颜色的主要内容,如果未能解决你的问题,请参考以下文章

谷歌图表中注释的不同颜色

谷歌图表背景颜色

谷歌图表 - 酒吧系列标题不同的颜色

谷歌图表vAxis勾选多种颜色和相应的浅色背景

如何在反应谷歌图表中根据散点图中的某个范围值显示点颜色

从浮动图表中获取数据系列的颜色