हाईचर्ट्स - गतिशील चार्ट कैसे बनाएं जो

Question

निर्यात करता है मैं गतिशील रूप से जेनरेट किए गए चार्ट को निर्यात करने की कोशिश कर रहा हूं और मैंने देखा है कि कुछ चीजें निर्यात नहीं की जाती हैं। उदाहरण के लिए, मेरे चार्ट में प्लॉटबैंड हैं जो प्रदर्शित होने वाले डेटा के आधार पर गतिशील हैं।

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

समस्या यह है कि प्रारंभिक चार्ट लोड के बाद चार्ट पर संशोधित कुछ भी नहीं होगा छवियों या पीडीएफ में निर्यात किया जाना चाहिए। अजाक्स कॉल के दौरान मेरे प्लॉट बैंड जोड़े गए थे। उन्हें चार्ट ऑब्जेक्ट में शामिल नहीं किया जा सका जो document.load() पर बनाया गया था। इसलिए उन्हें आसानी से हाईचर्ट्स द्वारा अनदेखा किया गया था।

मेरे चार्ट में, मैं विभिन्न साइटों पर 24 घंटे की अवधि के दौरान ऊर्जा उपयोग दिखाना चाहता हूं। उपयोगकर्ता विभिन्न दिन और विभिन्न साइटों का चयन कर सकते हैं। प्लॉट बैंड को ऑपरेटिंग घंटों को हाइलाइट करने की आवश्यकता होती है और प्रत्येक साइट के पास अलग-अलग ऑपरेटिंग घंटे होते हैं जो डेटा से लोड होते हैं। साथ ही, चार्ट शीर्षक साइट का नाम दिखाता है और उपशीर्षक स्क्वायर फुटेज दिखाता है।

इसके अतिरिक्त, मेरा कोड हाईचर्ट्स रेंडरर text() कमांड का उपयोग करके ग्राफ के नीचे कुछ कस्टम टेक्स्ट खींचता है।

var chart; 
$(document).ready(function() { 
    chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: "ChartContainer", 
      type: "line", 
      title: { text: null }, 
      subtitle: { text: null } 
     } 
    } 
}); 

function UpdateChart() { 
    $.ajax({ 
     url: "/my/url.php", 
     success: function(json) { 
      chart.addSeries(json[1]); 
      chart.addSeries(json[2]); 
      chart.setTitle(json[0].title, json[0].subtitle); 
      chart.xAxis[0].addPlotBand({ color: "#FCFFB9", from: json[0].OpenInterval, to: json[0].CloseInterval, label: { text: "Operating Hours", verticalAlign: "bottom", y: -5, style: { fontSize: "8pt", color: "gray" } } }); 
      chart.renderer.text("Custom Text", 50, 100); 
     } 
    }); 
} 

दुर्भाग्य से, शीर्षक, साजिश बैंड और "कस्टम पाठ" यदि उपयोगकर्ता चार्ट निर्यात करता दिखाई नहीं देगा:

मुश्किल से कार्य निर्यात के लिए मेरे कोड कुछ इस तरह लग रहा है।

Answer 1

कुंजी फिर से व्यवस्थित कैसे आप अपने चार्ट का निर्माण करना है (यहाँ अपने खुद के सवाल का जवाब देने)।

document.load() पर चार्ट उत्पन्न न करें। AJAX कॉल के success() फ़ंक्शन में इसे उत्पन्न करें।

सबसे पहले, जांचें कि क्या चार्ट पहले से मौजूद है और destroy() है। यदि आपका कोड उपयोगकर्ताओं को गतिशील रूप से सेटिंग्स को बदलने की अनुमति देता है, तो यह एक नया AJAX कॉल निष्पादित करने का कारण बन जाएगा जिसे ग्राफ़ को अपडेट करने की आवश्यकता होगी। फिर से निर्मित होने से पहले चार्ट को नष्ट करने की जरूरत है।

अब स्क्रैच से एक नया चार्ट बनाएं। लेकिन, अब आपके पास पहले से ही AJAX कॉल से आवश्यक डेटा है ताकि आप इसे सही जानकारी के साथ स्क्रैच से बना सकें। हाईचर्ट केवल उस डेटा को निर्यात करेगा जिसमें पहली बार चार्ट बनाया गया था। तो सभी कस्टम डेटा को यहां शामिल करने की आवश्यकता है। यदि आपको ग्राफ पर कुछ बदलना है, तो इसे नष्ट करें और कस्टम डेटा का उपयोग करके इसे पुनर्निर्माण करें।

function UpdateChart() { 
    $.ajax({ 
     url: "/my/url.php", 
     success: function(json) { 
      // If the chart exists, destroy it 
      if (chart) chart.destroy(); 

      // Create the chart 
      chart = new Highcharts.Chart({ 
       chart: { 
        renderTo: "ChartContainer", 
        type: "line", 
        events: { 
         load: function(event) { 
          this.renderer.text("Custom Text", 50, 100); 
         } 
        }, 
        title: { text: json[0].title }, 
        subtitle: { text: json[0].sqft } 
       }, 
       plotBands: { 
        color: "#FCFFB9", 
        from: json[0].OpenInterval, 
        to: json[0].CloseInterval, 
        label: { 
         text: "Store Hours", verticalAlign: "bottom", y: -5, style: { fontSize: "8pt", color: "gray" } 
        } 
       } 
      }; 

      // Add two data series to the chart 
      chart.addSeries(json[1]); 
      chart.addSeries(json[2]); 

      // Set title and sub-title 
      chart.setTitle(json[0].title, json[0].subtitle); 
     } 
    }); 
} 

अब, चार्ट आपके द्वारा जोड़े गए सभी कस्टम आइटम दिखाएगा।ध्यान दें कि renderer.text() कमांड का उपयोग कर चार्ट में लिखे गए कस्टम टेक्स्ट को chart.load() ईवेंट में जोड़ा गया है। किसी कारण से, यह केवल यहां काम करता है।

कुंजी याद रखें: हाईचर्ट केवल उस डेटा को निर्यात करेगा जिसमें पहली बार चार्ट बनाया गया था। यह आपको बहुत सारे सिरदर्द बचाएगा।

Answer 2

हां - Google ड्राइव में होस्ट की गई फ़ाइल के जेसन डेटा का उपयोग करके डायनामिक हाईचार्ट के sample codehttp://jsfiddle.net/vijaykumarkagne/9c2vqq7q/ पर आपके संभावित और हाईएक्ट्स का समर्थन किया गया है।

$.getJSON("https://b943d995d961c8938d74bf398f8748e2b34864c6.googledrive.com/host/0B_i_hw1oG1HeaU9nMWxfTnJZd1k/data.json",{format:"json"},function(result){ 
 
     
 
       
 
chart = new Highcharts.Chart({ 
 
     chart: { 
 
      zoomType: 'x', 
 
      type: 'line', 
 
      renderTo: 'container' 
 
     }, 
 
     title: { 
 
      text: ' ' 
 
     }, 
 
     subtitle: { 
 
      text: 'Click and drag in the plot area to zoom in', 
 
      x: -20 
 
     }, 
 
     xAxis: { 
 
      type: 'datetime', 
 
      title: { 
 
       text: ' ' 
 
      } 
 

 
     }, 
 
     yAxis: { 
 
      title: { 
 
       text: ' ' 
 
      } 
 
     },   
 

 
     series:[{ 
 
      name: 'Tokyo', 
 
      data: result 
 
     }] 
 

 
    }); 
 
     });

<script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
    <script src="https://b943d995d961c8938d74bf398f8748e2b34864c6.googledrive.com/host/0B_i_hw1oG1HeaU9nMWxfTnJZd1k/dataEmp.json"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
    <script src="https://code.highcharts.com/modules/drilldown.js"></script> 
 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
 
<body> 
 
<div id="container"></div> 
 
</body>