हाइचार्ट्स रेंडरर

Question

के साथ स्ट्रोक-चौड़ाई को एनिमेट करें मैं कस्टम चार्ट खींचने के लिए हाईचार्ट्स एसवीजी रेंडरिंग एपीआई (रेंडरर) का उपयोग कर रहा हूं और मैं रेक्ट की स्ट्रोक-चौड़ाई विशेषता को एनिमेट करना चाहता हूं। Here is हाइचार्ट्स दस्तावेज़ में प्रदान किया गया उदाहरण, लेकिन ऐसा लगता है कि यह ठीक से काम नहीं कर रहा है - स्ट्रोक-चौड़ाई को छोड़कर सभी विशेषताओं को बदल दिया गया है।
अगर मैं Chrome DevTools में HTML खोलने मैं ऐसा ही कुछ देख सकते हैं:

<rect x="50" y="50" width="200" height="20" rx="5" ry="5" stroke="gray" 
stroke-width="2" fill="silver" zIndex="3" strokeWidth="10"></rect> 

स्ट्रोक-चौड़ाई ऊंट शैली नाम का उपयोग कर सेट किया गया है, डैश शैली नाम नहीं।

कुछ कामकाज हो सकता है?

Answer 1

हाँ, एक कामकाज है। आप jQuery के attr() फ़ंक्शन का उपयोग कर इसे प्राप्त कर सकते हैं। जब आप आयताकार पर क्लिक करते हैं तो आप स्ट्रोक-चौड़ाई विशेषता बदलते हैं।

फिर भी मुझे लगता है कि यह एपीआई की एक बग के रूप में रिपोर्ट करने के लिए एक अच्छा मुद्दा है?

फिर भी जे एस कोड इस तरह दिखेगा:

$(function() { 
    var renderer = new Highcharts.Renderer(
      $('#container')[0], 
      400, 
      300 
     ), 
     rect = renderer.rect(100, 100, 100, 100, 5) 
      .attr({ 
       'stroke-width': 2, 
       stroke: 'gray', 
       fill: 'silver', 
       zIndex: 3 
      }) 
      .on('click', function() { 
       rect.animate({ 
        x: 50, 
        y: 50, 
        width: 200, 
        height: 20 
       }) 
       $("rect").attr("stroke-width", "30"); // here you can change the stroke-width    
      }) 
      .add(); 
}); 

यहाँ कार्रवाई में यह देखने के लिए समायोजित JSFIDDLE

---

संस्करण 2

अपनी टिप्पणी मैं संपादन के आधार पर कोड। इस मामले में आप स्ट्रोक-चौड़ाई के लिए एक एनीमेशन भी सेट करते हैं। यह एक साधारण समाधान है। एक अन्य समाधान मूल हाईचर लाइब्रेरी को ट्वीव करेगा जो मैं अनुशंसा नहीं करता। वैसे भी, उम्मीद है कि यह मदद करता है:

$(function() { 
    var renderer = new Highcharts.Renderer(
      $('#container')[0], 
      400, 
      300 
     ), 
     rect = renderer.rect(100, 100, 100, 100, 5) 
      .attr({ 
       'stroke-width': 2, 
       stroke: 'gray', 
       fill: 'silver', 
       zIndex: 3 
      }) 
      .on('click', function() { 
       rect.animate({ 
        x: 50, 
        y: 50, 
        width: 200, 
        height: 20 
       }) 
       $("rect").animate(
        { "stroke-width": "10" }, 
        { 
         duration: 500, 
         step: function(now) { $(this).attr("stroke-width", now); } 
        });     
      }) 
      .add(); 
}); 

अवधि आपके लिए उपयुक्त क्या समायोजित की जा सकती है। इसे यहां कार्रवाई में देखें: JSFIDDLE