Wijcompositechart点击事件
wijcompositechart click event
本文关键字：事件 Wijcompositechart 更新时间：2023-09-26
所以这是我让饼图作为一个漂亮可显示的菜单系统工作的例子。
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>
有什么想法吗？ 我相信这将是一个简单的，我是一个愚蠢的屁股，只是我确定如何管理此处显示的单击事件：
任何帮助将不胜感激。
好吧，
如果有人想复制这个菜单，我最终解决了这个问题。 代码如下，我将把这个例子留给人们访问和测试。
注意：您需要为每个图表项目创建一个与标签名称完全相同的 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>
相关文章：
- 分派点击事件并保留击键修饰符
- 模糊事件的Javascript测试
- keyup事件处理程序更改焦点不适用于快速键入
- 使用 jQuery 的 .on 函数如何获取事件的原始元素
- 如何使Javascript动态html表及其上的事件
- 使用类从一个标记中双击事件
- 如何在未直接触发的情况下停止事件
- 如何在elfinder插件(一个文件管理器插件）上获得上传前事件
- 对iPad上的点击事件反应缓慢
- 事件和状态
- Fancybox是否将Click事件静音
- 主干-不管怎样，检查事件以前是否绑定过
- 从控制器返回后Ajax启动事件激发
- 如何从画布上的某个移动事件中获取X和Y
- Jquery:未触发select事件
- JsFiddle上的鼠标事件不起作用
- 只覆盖箭头键滚动事件
- $window.ga在AngularJS事件中未定义
- cron作业与Javascript计时事件
- ng更改事件不适用于Dropdown
