ग्राफ

Question

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

उनके API दस्तावेज़ों के अनुसार:

श्रृंखला के लिए एक बिंदु जोड़े के बाद समय प्रस्तुत करना। बिंदु को अंत में जोड़ा जा सकता है, या इसे श्रृंखला के बीच में या बीच में एक्स मान देकर जोड़ा जा सकता है।

तो मेरे सवाल कर रहे हैं:

1. कैसे एक यादृच्छिक स्थान के लिए एक बिंदु जोड़ा के लिए?

2. मैं जो बिंदु जोड़ा गया है उसे कैसे हटा सकता हूं?

मैं समस्या का प्रदर्शन करने के लिए निम्नलिखित डेमो को जोड़ रहा हूं।

$(function() { 
 
    $('#container').highcharts({ 
 

 
     series: [{ 
 
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 
 
     }] 
 

 
    }); 
 

 

 
    // the button action 
 
    var i = 0; 
 
    $('#button').click(function() { 
 
     var chart = $('#container').highcharts(); 
 
     chart.series[0].addPoint(50 * (i % 3)); 
 
     i += 1; 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 

 
<div id="container" style="height: 400px"></div> 
 
<button id="button" class="autocompare">Add point</button>

Answer 1

की Highcharts कहते doc, "बिंदु विकल्प के रूप में। विकल्पों वाली एक संख्या है, तो कि y मूल्य के साथ एक बिंदु series.If यह एक सरणी है में जोड़ा जाता है, इसे क्रमशः एक्स और वाई मानों के रूप में व्याख्या किया जाएगा। " तो addPoint() के पैरामीटर के रूप में एक सरणी दें।

एक बिंदु को हटाने के लिए, removePoint का उपयोग करें।

$(function() { 
 
    $('#container').highcharts({ 
 

 
     series: [{ 
 
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 
 
     }] 
 

 
    }); 
 

 

 
    // the button action 
 
    var i = 0; 
 
    $('#button').click(function() { 
 
     var chart = $('#container').highcharts(); 
 
     chart.series[0].addPoint([i, 50 * (i % 3)]); 
 
     i += 1; 
 
    }); 
 

 
    $('#removebutton').click(function() { 
 
     var chart = $('#container').highcharts(); 
 
     chart.series[0].removePoint(i); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 

 
<div id="container" style="height: 400px"></div> 
 
<button id="button" class="autocompare">Add point</button> 
 
<button id="removebutton" class="autocompare">remove point</button>

Answer 2

आप निर्दिष्ट करने के लिए दोनों एक्स की जरूरत है:

यहां उदाहरण के लिए कौन सी जगह पर "i" बिंदु जोड़ने और स्थिति पर "i" बिंदु को दूर है और y निर्देशांक, अन्यथा यह मानने जा रहा है कि एक्स समन्वय एक्स अक्ष पर अगला डेटा बिंदु है। इसे आज़माएं:

$(function() { 
$('#container').highcharts({ 

    series: [{ 
     data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 
    }] 

}); 


// the button action 
var i = 0; 
$('#button').click(function() { 
    var chart = $('#container').highcharts(); 
    chart.series[0].addPoint({ 
    x: 2*i, // or some other value 
    y: 50 * (i % 3) 
}); 
    i += 1; 
}); 

});