使用jQuery遍历ASP.NET应用程序中的一组Morris Donuts，并将文本移到外部 [英] Iterating through a set Morris Donuts in ASP.NET application using jQuery and move text outside
本文介绍了使用jQuery遍历ASP.NET应用程序中的一组Morris Donuts，并将文本移到外部的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
TL; DR:1.遍历Div中的所有甜甜圈. 2.在mouseOver上将标签文本移动到甜甜圈的外部.
TL;DR: 1. Iterate through all donuts within a Div. 2. Move label text outside the donut on mouseOver.
我遇到了此和
I came across this and this questions that got me half way there, but I am trying to iterate through several donuts. I'm new to jQuery and I've tried a few options, but I just don't have a complete understanding.
这是我的代码.任何帮助将不胜感激:
Here's my code. Any help would be appreciated:
HTML
`<div class="dials">
<div class="row">
<div class="col-md-4">
<asp:Label ID="lblSurvey1" Text="" runat="server" CssClass="page-subheader" />
<div id="divSurvey1"></div><span id="morrisDonutChartSpan"></span>
</div>
<div class="col-md-4">
<asp:Label ID="lblSurvey2" Text="" runat="server" CssClass="page-subheader" />
<div id="divSurvey2"></div><span id="morrisDonutChartSpan"></span>
</div>
</div>
</div>`
甜甜圈脚本:
`
Morris.Donut({
element: 'divSurvey1',
colors: ['#2299DE', '#97C240', '#2c594f', '#002D40', '#BC0D20', '#FF8922', '#f0b71e', '#9369d2'],
labelColor: '#B5B5B5',
resize: false,
data: [
<asp:Literal id="litSurvey1Data" runat="server"></asp:Literal>
]
});
Morris.Donut({
element: 'divSurvey2',
colors: ['#2299DE', '#97C240', '#2c594f', '#002D40', '#BC0D20', '#FF8922', '#f0b71e', '#9369d2'],
labelColor: '#B5B5B5',
resize: false,
data: [
<asp:Literal id="litSurvey2Data" runat="server"></asp:Literal>
]
});
$( ".dial" ).mouseover(function() {
prepareMorrisDonutChart();
});
$( document ).ready(function() {
prepareMorrisDonutChart();
});
function prepareMorrisDonutChart() {
$(".dial tspan:first").css("display","none");
$(".dial tspan:nth-child(1)").css("font-size","40px");
var isi = $(".dial tspan:first").html();
$('.dial').text(isi);
}
`
推荐答案
也许有些矫kill过正，但我确实可以使用.以为我会共享代码，让别人开心一下.
Maybe a bit overkill, but I got it to work. Thought I'd share the code and make someone happy out there lol.
HTML
<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://cdn.oesmith.co.uk/morris-0.4.1.min.js"></script>
<meta charset=utf-8 />
<title>Morris.js Donut Chart Example</title>
</head>
<body>
<div ID="donut_holder"></div>
<span id="morrisDonutSpan"></span>
<div ID="donut_holder2"></div>
<span id="morrisDonutSpan2"></span>
<div ID="donut_holder3"></div>
<span id="morrisDonutSpan3"></span>
</body>
</html>
JavaScript
$(function() {
var morrisElementArray = [
{morrisElement: "donut_holder", morrisSpan: "morrisDonutSpan"},
{morrisElement: "donut_holder2", morrisSpan: "morrisDonutSpan2"},
{morrisElement: "donut_holder3", morrisSpan: "morrisDonutSpan3"}
];
Morris.Donut({
element: 'donut_holder',
data: [
{label: "Download Sales", value: 12},
{label: "In-Store Sales", value: 30},
{label: "Mail-Order Sales", value: 20}
]
});
Morris.Donut({
element: 'donut_holder2',
data: [
{label: "Download Sales", value: 12},
{label: "In-Store Sales", value: 30},
{label: "Mail-Order Sales", value: 20}
]
});
Morris.Donut({
element: 'donut_holder3',
data: [
{label: "Download Sales", value: 12},
{label: "In-Store Sales", value: 30},
{label: "Mail-Order Sales", value: 20}
]
});
$(document).ready(function() {
morrisElementArray.forEach(function(element, index) {
prepareMorrisDonutChart(element.morrisElement, element.morrisSpan);
$(this).mouseover(function() {
prepareMorrisDonutChart(element.morrisElement, element.morrisSpan);
});
});
});
function prepareMorrisDonutChart(morrisEle, morrisSpa) {
//hides description from donut
$("#" + morrisEle + " tspan:first").css("display", "none");
// increases number text size
$("#" + morrisEle + " tspan:nth-child(1)").css("font-size", "40px");
// gets html description from donut
var isi = $("#" + morrisEle + " tspan:first").html();
// assigns html description to span
$("#" + morrisSpa).text(isi);
}
});
这篇关于使用jQuery遍历ASP.NET应用程序中的一组Morris Donuts，并将文本移到外部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
