चार्टज

Question

में होवर पर लंबवत रेखा को कैसे प्रस्तुत करें I चार्ट चार्ट v2 में साजिश क्षेत्र पर होवर करते समय एक लंबवत रेखा प्रस्तुत करने का प्रयास कर रहा हूं। मेरे पास इसका मूल कार्य संस्करण है, लेकिन मुझे पता नहीं चला है कि प्रत्येक बार लाइन खींची जाने पर लाइन को कैसे हटाया जाए (पुरानी रेखाएं बस घूमती हैं)।

यहाँ एक काम कर उदाहरण है - https://jsfiddle.net/s9gyynxp/5/

var ctx = document.getElementById("myChart"); 
var myChart = new Chart(ctx, { 
    type: 'line', 
    data: { 
     labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], 
     datasets: [{ 
      label: '# of Votes', 
      data: [12, 19, 3, 5, 2, 3] 
     }] 
    } 
}); 

// Hook into main event handler 
var parentEventHandler = Chart.Controller.prototype.eventHandler; 
Chart.Controller.prototype.eventHandler = function() { 
    var ret = parentEventHandler.apply(this, arguments); 

    // Draw the vertical line here 
    var eventPosition = Chart.helpers.getRelativePosition(arguments[0], this.chart); 
    this.chart.ctx.beginPath(); 
    this.chart.ctx.moveTo(eventPosition.x, 30); 
    this.chart.ctx.strokeStyle = "#ff0000"; 
    this.chart.ctx.lineTo(eventPosition.x, 340); 
    this.chart.ctx.stroke(); 

    return ret; 
}; 

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

किसी भी सुझाव की सराहना की जाती है, धन्यवाद! इससे पहले कि आप अपनी लाइन

... 
this.clear(); 
this.draw(); 
... 

वैसे आकर्षित

Answer 1

बस निम्न पंक्तियां जोड़ें, अपनी लाइन नीचे करने के लिए सभी तरह से खिंचाव नहीं है। यदि आप इसे अपने yStart और yEnd के लिए 0 और this.chart.height का उपयोग करने के लिए सभी तरह से फैलाना चाहते हैं। या आप स्केल के लिए अधिकतम और न्यूनतम पिक्सेल की गणना करने के लिए वाई अक्ष स्केल का उपयोग कर सकते हैं (https://jsfiddle.net/ombaww9t/ देखें)।

---

फिडल - https://jsfiddle.net/56s9av1j/

Answer 2

// Hook into main event handler 
let parentEventHandler = Chart.Controller.prototype.eventHandler; 
Chart.Controller.prototype.eventHandler = function() { 
    let ret = parentEventHandler.apply(this, arguments); 

    let x = arguments[0].x; 
    let y = arguments[0].y; 
    this.clear(); 
    this.draw(); 
    let yScale = this.scales['y-axis-0']; 
    this.chart.ctx.beginPath(); 
    this.chart.ctx.moveTo(x, yScale.getPixelForValue(yScale.max)); 
    this.chart.ctx.strokeStyle = "#ff0000"; 
    this.chart.ctx.lineTo(x, yScale.getPixelForValue(yScale.min)); 
    this.chart.ctx.stroke(); 

    return ret; 
};