jQueryを使用してASP.NETアプリケーションのMorris Donutsを繰り返し処理し、テキストを外側に移動

TL; DR：1. Div内のすべてのドーナツを繰り返します。 2. mouseOverでドーナツの外側にラベルテキストを移動します。jQueryを使用してASP.NETアプリケーションのMorris Donutsを繰り返し処理し、テキストを外側に移動

私はthisとthisの質問に出会って私のところに途中で来ましたが、いくつかのドーナツを繰り返そうとしています。私はjQueryが新しく、いくつかのオプションを試しましたが、完全な理解はありません。

ここに私のコードです。

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); 
    }

出典

2016-11-25 megamaiku

あなたが達成したいものを私のために非常に明確ではありませんI'ts。あなたはドーナツの外にテキストを移動したい：値（数）？ラベル？どちらも？いつ？ページの読み込みには？いくつかのアクション（マウスオーバーなど）？モリス・ドーナツ・チャートの「通常の」使用から正確に何を変更したいのかをもう少し説明してください。 – krlzlx

それを指摘してくれてありがとう。それらの回答を提供するために私の質問を編集しました（ラベルテキストとマウスオーバー）。 – megamaiku

たぶん少し行き過ぎを、私は得ましたそれは機能する。私はコードを共有し、誰かを幸せにすると思った。

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); 
    } 

});

出典

2016-12-02 23:44:28 megamaiku

jQueryを使用してASP.NETアプリケーションのMorris Donutsを繰り返し処理し、テキストを外側に移動

答えて

関連する問題