0

所以这里有一个我让饼图作为一个很好显示的菜单系统工作的例子。

http://crucialingredient.co.uk/pie-chart-menu-test/

我现在要做的是使元素可单击，并在单击时分别打开它们自己的 URL。

坦率地说，我对 Javascript 的经验并不丰富，并且在很长一段时间没有做太多事情后，我目前正在恢复使用它的速度。

代码来源于这里：http ://wijmo.com/docs/wijmo/Wijmo~jQuery.fn.-~wijcompositechart.html

这是代码：

<!--jQuery References-->
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js" type="text/javascript"></script>

<!--Theme-->
<link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet"  type="text/css" />

<!--Wijmo Widgets CSS-->
<link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20132.15.min.css" rel="stylesheet" type="text/css" />

<!--Wijmo Widgets JavaScript-->
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20132.15.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20132.15.min.js" type="text/javascript"></script>

<script id="scriptInit" type="text/javascript">
$(document).ready(function () {            
    $("#wijcompositechart").wijcompositechart({                

        axis: {                    
            y: {gridMajor: {visible: false}, textVisible: false},
            x: {visible: false, textVisible: false}                
        },                
        animation: {enabled: false },           
        chartLabelStyle: {fill: "#fff"}, 
        hint: {content: function ()
                {return this.label + ' ' + '';}
        },
        click : function () {
            $(this).slideUp();
            return false;
        },           
        header: {text: "Pie Chart Menu"},            
        seriesList: [
            {                
            type: "pie",               
            legendEntry: true,                
            center: { x: 500, y: 400 },
            radius: 350,
            data: [                    
                {label: "1", labelURL:"http://www.google.com", legendEntry: false, data: 5.56, offset: 0}, 
                {label: "2", legendEntry: false, data: 5.56, offset: 0},                     
                {label: "", legendEntry: false, data: 5.56, offset: 0},                     
                {label: "", legendEntry: false, data: 5.56, offset: 0},
                {label: "", legendEntry: false, data: 5.56, offset: 0}, 
                {label: "", legendEntry: false, data: 5.56, offset: 0}, 
                {label: "", legendEntry: false, data: 5.56, offset: 0},                     
                {label: "", legendEntry: false, data: 5.56, offset: 0},                     
                {label: "", legendEntry: false, data: 5.56, offset: 0},
                {label: "", legendEntry: false, data: 5.56, offset: 0},
                {label: "", legendEntry: false, data: 5.56, offset: 0}, 
                {label: "", legendEntry: false, data: 5.56, offset: 0},                     
                {label: "", legendEntry: false, data: 5.56, offset: 0},                     
                {label: "", legendEntry: false, data: 5.56, offset: 0},
                {label: "", legendEntry: false, data: 5.56, offset: 0},
                {label: "", legendEntry: false, data: 5.56, offset: 0},
                {label: "", legendEntry: false, data: 5.56, offset: 0}, 
                {label: "", legendEntry: false, data: 5.56, offset: 0}
                ]
            },
            {                
            type: "pie",               
            legendEntry: true,                
            center: { x: 500, y: 400 },
            radius: 200,
            data: [                    
                {label: "1", legendEntry: false, data: 11.1111, offset: 0}, 
                {label: "2", legendEntry: false, data: 11.1111, offset: 0},                     
                {label: "3", legendEntry: false, data: 11.1111, offset: 0},                     
                {label: "4", legendEntry: false, data: 8.3333, offset: 0},                     
                {label: "5", legendEntry: false, data: 8.3333, offset: 0},
                {label: "6", legendEntry: false, data: 8.33333, offset: 0}, 
                {label: "7", legendEntry: false, data: 8.333, offset: 0},                     
                {label: "8", legendEntry: false, data: 11.1111, offset: 0},                     
                {label: "9", legendEntry: false, data: 11.1111, offset: 0},                     
                {label: "10", legendEntry: false, data: 11.1111, offset: 0}
                ]
            }, 
            {                
            type: "pie",                
            legendEntry: true,                
            center: { x: 500, y: 400 },
            radius: 100,
            data: [                    
                {label: "1", legendEntry: false, data: 33.333, offset: 0},
                {label: "2", legendEntry: false, data: 33.3333, offset: 0},
                {label: "3", legendEntry: false, data: 33.3333, offset: 0}]
        }],
        seriesStyles: [
            {fill: "#4AE83A", stroke: "#FFF", "stroke-width": 1.5, opacity: 1}, 
            {fill: "#4AE83A", stroke: "#FFF", "stroke-width": 1.5, opacity: 1}, 
            {fill: "#4AE83A", stroke: "#FFF", "stroke-width": 1.5, opacity: 1}, 
            {fill: "#4AE83A", stroke: "#FFF", "stroke-width": 1.5, opacity: 1}, 
            {fill: "#4AE83A", stroke: "#FFF", "stroke-width": 1.5, opacity: 1}, 
            {fill: "#4AE83A", stroke: "#FFF", "stroke-width": 1.5, opacity: 1}, 
            {fill: "#61B7CF", stroke: "#FFF", "stroke-width": 1.5, opacity: 1}, 
            {fill: "#61B7CF", stroke: "#FFF", "stroke-width": 1.5, opacity: 1}, 
            {fill: "#61B7CF", stroke: "#FFF", "stroke-width": 1.5, opacity: 1}, 
            {fill: "#61B7CF", stroke: "#FFF", "stroke-width": 1.5, opacity: 1},
            {fill: "#61B7CF", stroke: "#FFF", "stroke-width": 1.5, opacity: 1}, 
            {fill: "#61B7CF", stroke: "#FFF", "stroke-width": 1.5, opacity: 1}, 
            {fill: "#CCCCCC", stroke: "#FFF", "stroke-width": 1.5, opacity: 1}, 
            {fill: "#CCCCCC", stroke: "#FFF", "stroke-width": 1.5, opacity: 1}, 
            {fill: "#CCCCCC", stroke: "#FFF", "stroke-width": 1.5, opacity: 1},
            {fill: "#CCCCCC", stroke: "#FFF", "stroke-width": 1.5, opacity: 1}, 
            {fill: "#CCCCCC", stroke: "#FFF", "stroke-width": 1.5, opacity: 1}, 
            {fill: "#CCCCCC", stroke: "#FFF", "stroke-width": 1.5, opacity: 1},
            {fill: "#4AE83A", stroke: "#FFF", "stroke-width": 1.5, opacity: 1},
            {fill: "#4AE83A", stroke: "#FFF", "stroke-width": 1.5, opacity: 1},
            {fill: "#4AE83A", stroke: "#FFF", "stroke-width": 1.5, opacity: 1},
            {fill: "#61B7CF", stroke: "#FFF", "stroke-width": 1.5, opacity: 1},
            {fill: "#61B7CF", stroke: "#FFF", "stroke-width": 1.5, opacity: 1},
            {fill: "#61B7CF", stroke: "#FFF", "stroke-width": 1.5, opacity: 1},
            {fill: "#61B7CF", stroke: "#FFF", "stroke-width": 1.5, opacity: 1},
            {fill: "#CCCCCC", stroke: "#FFF", "stroke-width": 1.5, opacity: 1},
            {fill: "#CCCCCC", stroke: "#FFF", "stroke-width": 1.5, opacity: 1},
            {fill: "#CCCCCC", stroke: "#FFF", "stroke-width": 1.5, opacity: 1},
            {fill: "#4AE83A", stroke: "#FFF", "stroke-width": 1.5, opacity: 1},
            {fill: "#61B7CF", stroke: "#FFF", "stroke-width": 1.5, opacity: 1},
            {fill: "#CCCCCC", stroke: "#FFF", "stroke-width": 1.5, opacity: 1}
        ],
        seriesHoverStyles: [{
            fill: "180-#0099cc-#2889aa", stroke: "#4B00CC", "stroke-width": 2, opacity: 1
        }, {
            fill: "180-#0099cc-#2889aa", stroke: "#4B00CC", "stroke-width": 2, opacity: 1
        }, {
            fill: "180-#0099cc-#2889aa", stroke: "#4B00CC", "stroke-width": 2, opacity: 1
        }, {
            fill: "180-#0099cc-#2889aa", stroke: "#4B00CC", "stroke-width": 2, opacity: 1
        }, {
            fill: "180-#0099cc-#2889aa", stroke: "#4B00CC", "stroke-width": 2, opacity: 1
        }, {
            fill: "180-#0099cc-#2889aa", stroke: "#4B00CC", "stroke-width": 2, opacity: 1
        }, {
            fill: "180-#B800CC-#4B00CC", stroke: "#cb6928", "stroke-width": 2, opacity: 1
        }, {
            fill: "180-#B800CC-#4B00CC", stroke: "#cb6928", "stroke-width": 2, opacity: 1
        }, {
            fill: "180-#B800CC-#4B00CC", stroke: "#cb6928", "stroke-width": 2, opacity: 1
        }, {
            fill: "180-#B800CC-#4B00CC", stroke: "#cb6928", "stroke-width": 2, opacity: 1
        }, {
            fill: "180-#B800CC-#4B00CC", stroke: "#cb6928", "stroke-width": 2, opacity: 1
        }, {
            fill: "180-#B800CC-#4B00CC", stroke: "#cb6928", "stroke-width": 2, opacity: 1
        }, {
            fill: "180-#2200cc-#3e28aa", stroke: "#2889aa", "stroke-width": 2, opacity: 1
        }, {
            fill: "180-#2200cc-#3e28aa", stroke: "#2889aa", "stroke-width": 2, opacity: 1
        }, {
            fill: "180-#2200cc-#3e28aa", stroke: "#2889aa", "stroke-width": 2, opacity: 1
        }, {
            fill: "180-#2200cc-#3e28aa", stroke: "#2889aa", "stroke-width": 2, opacity: 1
        }, {
            fill: "180-#2200cc-#3e28aa", stroke: "#2889aa", "stroke-width": 2, opacity: 1
        }, {
            fill: "180-#2200cc-#3e28aa", stroke: "#2889aa", "stroke-width": 2, opacity: 1
        }, {
            fill: "#FFD1E4", stroke: "none", opacity: 1
        }, {
            fill: "#D1E2FF", stroke: "none", opacity: 1
        }, {
            fill: "#D6D1FF", stroke: "none", opacity: 1
        }, {
            fill: "#FFD1D1", stroke: "none", opacity: 1
        }, {
            fill: "#D1FFE1", stroke: "none", opacity: 1
        }, {
            fill: "#D6D1FF", stroke: "none", opacity: 1
        }, {
            fill: "#FFD1D1", stroke: "none", opacity: 1
        }, {
            fill: "#D1FFE1", stroke: "none", opacity: 1
        }, {
            fill: "#F7FFD1", stroke: "none", opacity: 1
        }, {
            fill: "#FFF1D1", stroke: "none", opacity: 1
        }, {
            fill: "#FFD1D1", stroke: "none", opacity: 1
        }, {
            fill: "#BDF7FF", stroke: "none", opacity: 1
        }, {
            fill: "#BDC6FF", stroke: "none", opacity: 1
        }, {
            fill: "#FFF0BD", stroke: "none", opacity: 1
        }, {
            fill: "#F4BDFF", stroke: "none", opacity: 1
        }]
});
}); 
</script>

有任何想法吗？我相信这将是一个简单的事情，而且我是个笨蛋，只是我确定如何管理此处显示的单击事件：

任何帮助将不胜感激。

4

1 回答 1

0

好吧，如果有人想复制这个菜单，我最后还是解决了。代码如下，我将把示例留给人们访问和测试。

注意：您需要为每个图表项创建一个与标签名称完全相同的 HTML 文件。但是，名称中可能包含空格。如果是这样，那么您可能还需要添加一些脚本以将其删除或添加“-”，其中有一个空格，以便您保持良好的干净代码和索引良好的 URL。

<!DOCTYPE html>

<html>

<head>
<meta charset="UTF-8">
<!--jQuery References-->
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js" type="text/javascript"></script>

<!--Theme-->
<link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" />

<!--Wijmo Widgets CSS-->
<link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20132.15.min.css" rel="stylesheet" type="text/css" />

<!--Wijmo Widgets JavaScript-->
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20132.15.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20132.15.min.js" type="text/javascript"></script>

<script id="scriptInit" type="text/javascript">
$(document).ready(function () {            
    $("#wijcompositechart").wijcompositechart({                

        axis: {                    
            y: {gridMajor: {visible: false}, textVisible: false},
            x: {visible: false, textVisible: false}                
        },                
        animation: {enabled: false },           
        chartLabelStyle: {fill: "#fff"}, 
        hint: {content: function ()
                {return this.label + ' ' + '';}
        },
        click: function (e, data) {
            var url = data["label"];
            var labelURL = 'http://www.crucialingredient.co.uk/pie-chart-menu-test/'+url+'.html';
            var e = window.open(labelURL, '_self');
            self._trigger("click", e, data);
        },
        header: {text: "Pie Chart Menu"},            
        seriesList: [
            {                
            type: "pie",               
            legendEntry: false,                
            center: { x: 500, y: 400 },
            radius: 350,
            data: [                    
                {label: "test", legendEntry: false, data: 5.56, offset: 0}, 
                {label: "2", legendEntry: false, data: 5.56, offset: 0},                     
                {label: "3", legendEntry: false, data: 5.56, offset: 0},                     
                {label: "4", legendEntry: false, data: 5.56, offset: 0},
                {label: "5", legendEntry: false, data: 5.56, offset: 0}, 
                {label: "6", legendEntry: false, data: 5.56, offset: 0}, 
                {label: "7", legendEntry: false, data: 5.56, offset: 0},                     
                {label: "8", legendEntry: false, data: 5.56, offset: 0},                     
                {label: "9", legendEntry: false, data: 5.56, offset: 0},
                {label: "10", legendEntry: false, data: 5.56, offset: 0},
                {label: "11", legendEntry: false, data: 5.56, offset: 0}, 
                {label: "12", legendEntry: false, data: 5.56, offset: 0},                     
                {label: "13", legendEntry: false, data: 5.56, offset: 0},                     
                {label: "14", legendEntry: false, data: 5.56, offset: 0},
                {label: "15", legendEntry: false, data: 5.56, offset: 0},
                {label: "16", legendEntry: false, data: 5.56, offset: 0},
                {label: "17", legendEntry: false, data: 5.56, offset: 0}, 
                {label: "18", legendEntry: false, data: 5.56, offset: 0}
                ]
            },
            {                
            type: "pie",               
            legendEntry: false,                
            center: { x: 500, y: 400 },
            radius: 200,
            data: [                    
                {label: "1", legendEntry: false, data: 11.1111, offset: 0}, 
                {label: "2", legendEntry: false, data: 11.1111, offset: 0},                     
                {label: "3", legendEntry: false, data: 11.1111, offset: 0},                     
                {label: "4", legendEntry: false, data: 8.3333, offset: 0},                     
                {label: "5", legendEntry: false, data: 8.3333, offset: 0},
                {label: "6", legendEntry: false, data: 8.33333, offset: 0}, 
                {label: "7", legendEntry: false, data: 8.333, offset: 0},                     
                {label: "8", legendEntry: false, data: 11.1111, offset: 0},                     
                {label: "9", legendEntry: false, data: 11.1111, offset: 0},                     
                {label: "10", legendEntry: false, data: 11.1111, offset: 0}
                ]
            }, 
            {                
            type: "pie",                
            legendEntry: false,                
            center: { x: 500, y: 400 },
            radius: 100,
            data: [                    
                {label: "1", legendEntry: false, data: 33.333, offset: 0},
                {label: "2", legendEntry: false, data: 33.3333, offset: 0},
                {label: "3", legendEntry: false, data: 33.3333, offset: 0}]
        }],
        seriesStyles: [
            {fill: "#4AE83A", stroke: "#FFF", "stroke-width": 1.5, opacity: 1}, 
            {fill: "#4AE83A", stroke: "#FFF", "stroke-width": 1.5, opacity: 1}, 
            {fill: "#4AE83A", stroke: "#FFF", "stroke-width": 1.5, opacity: 1}, 
            {fill: "#4AE83A", stroke: "#FFF", "stroke-width": 1.5, opacity: 1}, 
            {fill: "#4AE83A", stroke: "#FFF", "stroke-width": 1.5, opacity: 1}, 
            {fill: "#4AE83A", stroke: "#FFF", "stroke-width": 1.5, opacity: 1}, 
            {fill: "#61B7CF", stroke: "#FFF", "stroke-width": 1.5, opacity: 1}, 
            {fill: "#61B7CF", stroke: "#FFF", "stroke-width": 1.5, opacity: 1}, 
            {fill: "#61B7CF", stroke: "#FFF", "stroke-width": 1.5, opacity: 1}, 
            {fill: "#61B7CF", stroke: "#FFF", "stroke-width": 1.5, opacity: 1},
            {fill: "#61B7CF", stroke: "#FFF", "stroke-width": 1.5, opacity: 1}, 
            {fill: "#61B7CF", stroke: "#FFF", "stroke-width": 1.5, opacity: 1}, 
            {fill: "#CCCCCC", stroke: "#FFF", "stroke-width": 1.5, opacity: 1}, 
            {fill: "#CCCCCC", stroke: "#FFF", "stroke-width": 1.5, opacity: 1}, 
            {fill: "#CCCCCC", stroke: "#FFF", "stroke-width": 1.5, opacity: 1},
            {fill: "#CCCCCC", stroke: "#FFF", "stroke-width": 1.5, opacity: 1}, 
            {fill: "#CCCCCC", stroke: "#FFF", "stroke-width": 1.5, opacity: 1}, 
            {fill: "#CCCCCC", stroke: "#FFF", "stroke-width": 1.5, opacity: 1},
            {fill: "#4AE83A", stroke: "#FFF", "stroke-width": 1.5, opacity: 1},
            {fill: "#4AE83A", stroke: "#FFF", "stroke-width": 1.5, opacity: 1},
            {fill: "#4AE83A", stroke: "#FFF", "stroke-width": 1.5, opacity: 1},
            {fill: "#61B7CF", stroke: "#FFF", "stroke-width": 1.5, opacity: 1},
            {fill: "#61B7CF", stroke: "#FFF", "stroke-width": 1.5, opacity: 1},
            {fill: "#61B7CF", stroke: "#FFF", "stroke-width": 1.5, opacity: 1},
            {fill: "#61B7CF", stroke: "#FFF", "stroke-width": 1.5, opacity: 1},
            {fill: "#CCCCCC", stroke: "#FFF", "stroke-width": 1.5, opacity: 1},
            {fill: "#CCCCCC", stroke: "#FFF", "stroke-width": 1.5, opacity: 1},
            {fill: "#CCCCCC", stroke: "#FFF", "stroke-width": 1.5, opacity: 1},
            {fill: "#4AE83A", stroke: "#FFF", "stroke-width": 1.5, opacity: 1},
            {fill: "#61B7CF", stroke: "#FFF", "stroke-width": 1.5, opacity: 1},
            {fill: "#CCCCCC", stroke: "#FFF", "stroke-width": 1.5, opacity: 1}
        ],
        seriesHoverStyles: [{
            fill: "180-#0099cc-#2889aa", stroke: "#4B00CC", "stroke-width": 2, opacity: 1
        }, {
            fill: "180-#0099cc-#2889aa", stroke: "#4B00CC", "stroke-width": 2, opacity: 1
        }, {
            fill: "180-#0099cc-#2889aa", stroke: "#4B00CC", "stroke-width": 2, opacity: 1
        }, {
            fill: "180-#0099cc-#2889aa", stroke: "#4B00CC", "stroke-width": 2, opacity: 1
        }, {
            fill: "180-#0099cc-#2889aa", stroke: "#4B00CC", "stroke-width": 2, opacity: 1
        }, {
            fill: "180-#0099cc-#2889aa", stroke: "#4B00CC", "stroke-width": 2, opacity: 1
        }, {
            fill: "180-#B800CC-#4B00CC", stroke: "#cb6928", "stroke-width": 2, opacity: 1
        }, {
            fill: "180-#B800CC-#4B00CC", stroke: "#cb6928", "stroke-width": 2, opacity: 1
        }, {
            fill: "180-#B800CC-#4B00CC", stroke: "#cb6928", "stroke-width": 2, opacity: 1
        }, {
            fill: "180-#B800CC-#4B00CC", stroke: "#cb6928", "stroke-width": 2, opacity: 1
        }, {
            fill: "180-#B800CC-#4B00CC", stroke: "#cb6928", "stroke-width": 2, opacity: 1
        }, {
            fill: "180-#B800CC-#4B00CC", stroke: "#cb6928", "stroke-width": 2, opacity: 1
        }, {
            fill: "180-#2200cc-#3e28aa", stroke: "#2889aa", "stroke-width": 2, opacity: 1
        }, {
            fill: "180-#2200cc-#3e28aa", stroke: "#2889aa", "stroke-width": 2, opacity: 1
        }, {
            fill: "180-#2200cc-#3e28aa", stroke: "#2889aa", "stroke-width": 2, opacity: 1
        }, {
            fill: "180-#2200cc-#3e28aa", stroke: "#2889aa", "stroke-width": 2, opacity: 1
        }, {
            fill: "180-#2200cc-#3e28aa", stroke: "#2889aa", "stroke-width": 2, opacity: 1
        }, {
            fill: "180-#2200cc-#3e28aa", stroke: "#2889aa", "stroke-width": 2, opacity: 1
        }, {
            fill: "#FFD1E4", stroke: "none", opacity: 1
        }, {
            fill: "#D1E2FF", stroke: "none", opacity: 1
        }, {
            fill: "#D6D1FF", stroke: "none", opacity: 1
        }, {
            fill: "#FFD1D1", stroke: "none", opacity: 1
        }, {
            fill: "#D1FFE1", stroke: "none", opacity: 1
        }, {
            fill: "#D6D1FF", stroke: "none", opacity: 1
        }, {
            fill: "#FFD1D1", stroke: "none", opacity: 1
        }, {
            fill: "#D1FFE1", stroke: "none", opacity: 1
        }, {
            fill: "#F7FFD1", stroke: "none", opacity: 1
        }, {
            fill: "#FFF1D1", stroke: "none", opacity: 1
        }, {
            fill: "#FFD1D1", stroke: "none", opacity: 1
        }, {
            fill: "#BDF7FF", stroke: "none", opacity: 1
        }, {
            fill: "#BDC6FF", stroke: "none", opacity: 1
        }, {
            fill: "#FFF0BD", stroke: "none", opacity: 1
        }, {
            fill: "#F4BDFF", stroke: "none", opacity: 1
        }]
});
}); 
</script>

<title>Pie Chart Menu</title>
</head>

<body>
<div id="wijcompositechart" style="width: 1000px; height: 800px">
</div>
</body>
</html>
于 2013-10-11T11:49:39.920 回答