चार्ट.जेएस पर ओवरले लाइन ग्राफ

Question

मैं सोच रहा था कि क्या एक चार्ट ग्राफ जैसे चार्ट.जेएस ग्राफ की लाइन पर ओवरले करना संभव था? उदाहरण के लिए, एक्स अक्ष पर एक क्षैतिज रेखा ग्राफ

Answer 1

पर मूल्य 20 पर खींची जाएगी। मैंने कुछ ओवरले चार्ट कहा है जिसे मैंने chart.js (https://github.com/leighquince/Chart.js) के मेरे फोर्क में जोड़ा है जिसे इस्तेमाल किया जा सकता है इस दशा में। यह एक पंक्ति या बार चार्ट के रूप में काम करता है, केवल अंतर यह है कि आप type नामक एक अतिरिक्त संपत्ति घोषित करते हैं जो या तो 'line' या 'bar' हो सकता है। फिर बस new Chart(ctx).Overlay(data) पर कॉल करें।

तो आपके उदाहरण के लिए आपके पास बस बार चार्ट हो सकता है और फिर लाइन दिखाने के लिए एक और डेटा सेट (कुछ बेहतर रंगों के साथ) प्रदान किया गया है।

var data = { 
 
    labels: ["January", "February", "March", "April", "May", "June", "July"], 
 
    datasets: [{ 
 
    label: "My First dataset", 
 
    //new option, barline will default to bar as that what is used to create the scale 
 
    type: "line", 
 
    fillColor: "rgba(220,220,220,0.2)", 
 
    strokeColor: "rgba(0,0,0,0.6)", 
 
    pointColor: "rgba(0,0,0,0.6)", 
 
    pointStrokeColor: "#fff", 
 
    pointHighlightFill: "#fff", 
 
    pointHighlightStroke: "rgba(220,220,220,1)", 
 
    datasetFill:false, 
 
    data: [20, 20, 20, 20, 20, 20, 20] 
 
    }, { 
 
    label: "My First dataset", 
 
    //new option, barline will default to bar as that what is used to create the scale 
 
    type: "bar", 
 
    fillColor: "rgba(220,20,220,0.2)", 
 
    strokeColor: "rgba(220,20,220,1)", 
 
    pointColor: "rgba(220,20,220,1)", 
 
    pointStrokeColor: "#fff", 
 
    pointHighlightFill: "#fff", 
 
    pointHighlightStroke: "rgba(220,220,220,1)", 
 
    data: [32, 25, 33, 88, 12, 92, 33] 
 
    }] 
 
}; 
 
var ctx = document.getElementById("canvas").getContext("2d"); 
 
var chart = new Chart(ctx).Overlay(data, { 
 
    responsive: false 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://raw.githack.com/leighquince/Chart.js/master/Chart.js"></script> 
 

 
<canvas id="canvas" width="400"></canvas>

Answer 2

मैं कुछ इसी तरह की जरूरत है, लेकिन एक लाइन ग्राफ के बजाय मैं एक असली ओवरले लाइन है कि फ्लैट की तरह था की जरूरत है।

Chart.types.Bar.extend({ 
     name: 'BarOverlay', 
     draw: function (ease) { 
      Chart.types.Bar.prototype.draw.apply(this); 
      ctx.beginPath(); 
      ctx.lineWidth = 2; 
      ctx.strokeStyle = 'rgba(255, 0, 0, 1.0)'; 
      ctx.moveTo(35, this.scale.calculateY(100)); 
      ctx.lineTo(this.scale.calculateX(this.datasets[0].bars.length), this.scale.calculateY(100)); 
      ctx.stroke(); 
     } 
    }); 

खान "100" के निशान पर एक लाइन आकर्षित करने के लिए (इस मामले, जहां हम 100% का लक्ष्य होने पर देख रहे थे में) हार्ड-कोडेड है:

बस इतना की तरह चार्ट बढ़ाया ।

और यह इतनी तरह फोन:

new Chart(ctx).BarOverlay(data, options); 

मैं भी पुराना हो चुका Quince के कोड मिल गया और 1.0.2 Chart.js कोड किसी भी तरह के साथ संगत नहीं (प्रतिपादन सभी बग़ल में चला गया)।

Answer 3

StrangeWill का जवाब एक आधार के रूप में उत्कृष्ट था, लेकिन मैं डेटा के आधार पर एक बार ग्राफ पर खड़ी लाइनों तो यह संशोधित इस प्रकार की जरूरत:

सबसे पहले मैं (एक और डाटासेट जोड़ने है विकल्प सरणी के लिए किसी प्रॉपर्टी जोड़ा शायद क्लीनर लेकिन मैं इसे) की अनदेखी करने, जहां प्रत्येक विकल्प एक डेटा मूल्य सूचकांक है कि मैं हाइलाइट करना चाहते है ChartJS बताने के लिए, मोटे तौर पर इस प्रकार पड़ता था:

ChartDefaults.verticalOverlayAtBar = [itemOne, itemTwo] 
... 
var HistoryChart = new Chart(ctx).BarOverlay(ChartData, ChartDefaults); 

मैं तो StrangeWill के कोड को संशोधित किया है, यह विस्तार की सरणी पुनरावृति करने के लिए ऊपर से आइटम और संकेत बार पर ऊर्ध्वाधर रेखा खींचें।

Chart.types.Bar.extend({ 
    name: 'BarOverlay', 
    draw: function (ease) { 

     // First draw the main chart 
     Chart.types.Bar.prototype.draw.apply(this); 

     var ctx = this.chart.ctx; 
     var barWidth = this.scale.calculateBarWidth(this.datasets.length); 

     for (var i = 0; i < this.options.verticalOverlayAtBar.length; ++i) { 

      var overlayBar = this.options.verticalOverlayAtBar[i]; 

      // I'm hard-coding this to only work with the first dataset, and using a Y value that I know is maximum 
      var x = this.scale.calculateBarX(this.datasets.length, 0, overlayBar); 
      var y = this.scale.calculateY(2000); 

      var bar_base = this.scale.endPoint 

      ctx.beginPath(); 
      ctx.lineWidth = 2; 
      ctx.strokeStyle = 'rgba(255, 0, 0, 1.0)'; 
      ctx.moveTo(x, bar_base); 
      ctx.lineTo(x, y); 
      ctx.stroke(); 
     } 
     ctx.closePath(); 
    } 
}); 

यह सही रूप में मैं आंतरिक ChartJs कोड से परिचित नहीं हूँ नहीं है, विशेष रूप से मेरी लाइनों 2 बंद, हालांकि मेरी संदेह है कि कि चार्ट गणना डेटा सरणी के बजाय एक fencepost त्रुटि है है सलाखों के थे। हालांकि, उम्मीद है कि यह किसी और के लिए एक उपयोगी कदम आगे है।