Question

我有一个PHP页面，其中包含一系列饼图图像（我使用Google Chart Tools）所有相同的700x280尺寸：

<html>
<head>
<script>
var chart1 ='http://chart.apis.google.com/chart?cht=bhg&chs=700x280&chd=s:el,or&chco=4d89f9,c6d9fd';
var chart2 ='http://chart.apis.google.com/chart?cht=bhg&chs=700x280&chd=s:el,or&chco=4d89f9,c6d9fd&chbh=15,4,15';
var chart3 ='http://chart.apis.google.com/chart?cht=bvg&chs=700x280&chd=s:hello,world&chco=4d89f9,c6d9fd&chbh=15,4,15';

XXX please suggest a function here XXX
</script>
</head>
<body>
<img src="logo.png" width=700 height=280>

Chart 1:

<img src="http://chart.apis.google.com/chart?cht=p&chd=s:Uf9a&chs=700x280&chl=January|February|March|April" width=700 height=280>

Chart 2:

<img src="http://chart.apis.google.com/chart?cht=p&chd=s:Uf9a&chs=700x280&chdl=May|Juny|July|August" width=700 height=280>

Chart 3:

<img src="http://chart.apis.google.com/chart?cht=p&chd=s:Uf9a&chs=700x280&chl=September|October|November|December" width=700 height=280>

</body>
</html>

我想为用户提供查看条形图相同数据的可能性 - 当他们点击图表时。

上次我使用过Javascript，它曾用于MSIE4和Netscape。请给我一些关于我的小功能的指示。

即。我在构建Google Charts时不需要任何帮助，我只需要点击Javascript函数就可以在鼠标点击的情况下就地旋转图像，但需要满足以下要求：

1）禁用Javascript的用户仍然可以看到饼图。也很高兴让他们也可以看到条形图（即通过将条形图放在HTML链接后面，或者你可以用Javascript隐藏条形图，对于禁用Javascript的用户，它们不会被隐藏 - 这没关系）。

2）请为所有图表分配1个通用功能 - 即我不想为10个图表设置10个功能。

非常感谢！亚历

Answer 1

实现它已经很久了，因为我在没有框架的情况下编写了任何javascript（你忘了提到你是否使用了一个..你可能应该！）。无论如何，这是我的抨击。没有Javascript的人可以将饼图悬停在条形图上，而使用Javascript的人可以点击它们。

<style type="text/css">
  img.primary   { display: inline; }
  img.secondary { display: none; }
  div.foo:hover img.secondary { display: inline; }
  div.foo:hover img.primary   { display: none; }
</style>

<script type="text/javascript">
function swapImages(container)
{
    for(var child in container.childNodes)
    {
        child = container.childNodes[child];
        if(child.nodeName == "IMG")
            child.className = child.className == "primary" ?
                "secondary" : "primary";
    }
}

window.onload = function() {
    // Remove the foo class when the page loads, to disable hover
    var chartArea = document.getElementById("chartArea");
    for(var child in chartArea.childNodes)
    {
        child = chartArea.childNodes[child];
        if(child.nodeName == "DIV" && child.className == "foo")
            child.className = "";
    }
}
</script>

<div id="chartArea">
    <div class="foo" onclick="swapImages(this);">
        <img class="primary" src="http://somewhere/piechart1.png" />
        <img class="secondary" src="http://somewhere/barchart1.png" />
    </div>

    <div class="foo" onclick="swapImages(this);">
        <img class="primary" ... />
        <img class="secondary" ... />    
    </div>

   <div class="foo" ....>
</div>

Answer 2

如果您可以使用悬停而非点击更改图像，则可能不需要任何JavaScript ...

<style type="text/css">
/*<[CDATA[*/
a.chart,a.chart:hover{
    cursor:default;
    display:block;
    background-repeat:no-repeat;
    width:700px;
    height:280px;
}

#chart1{background-image:url(http://chart.apis.google.com/chart?cht=p&chd=s:Uf9a&chs=700x280&chl=January|February|March|April);}
#chart1:hover{background-image:url(http://chart.apis.google.com/chart?cht=bhg&chs=700x280&chd=s:el,or&chco=4d89f9,c6d9fd);}

#chart2{background-image:url(http://chart.apis.google.com/chart?cht=p&chd=s:Uf9a&chs=700x280&chdl=May|Juny|July|August);}
#chart2:hover{background-image:url(http://chart.apis.google.com/chart?cht=bhg&chs=700x280&chd=s:el,or&chco=4d89f9,c6d9fd&chbh=15,4,15);}

#chart3{background-image:url(http://chart.apis.google.com/chart?cht=p&chd=s:Uf9a&chs=700x280&chl=September|October|November|December);}
#chart3:hover{background-image:url(http://chart.apis.google.com/chart?cht=bvg&chs=700x280&chd=s:hello,world&chco=4d89f9,c6d9fd&chbh=15,4,15);}
/*]]>*/
</style>

<a id="chart1" class="chart" href="javascript://"><br/></a>
<a id="chart2" class="chart" href="javascript://"><br/></a>
<a id="chart3" class="chart" href="javascript://"><br/></a>

用于在鼠标单击时旋转图像的Javascript方法

2 个答案: