चार्ट.जेएस 2.0

Question

में क्षैतिज रेखाएं बनाएं क्या आप चार्ट.जेएस v2.0 को विस्तारित करने में मेरी सहायता कर सकते हैं। आप 2 विकल्प हैं chart.js साथ http://jsfiddle.net/vsh6tcfd/3/

var originalLineDraw = Chart.controllers.bar.prototype.draw; 

Chart.helpers.extend(Chart.controllers.bar.prototype, { 
    draw: function() { 
    originalLineDraw.apply(this, arguments); 

    var chart = this.chart; 
    var ctx = chart.chart.ctx; 

    var index = chart.config.data.lineAtIndex; 
    if (index) { 
     var xaxis = chart.scales['x-axis-0']; 
     var yaxis = chart.scales['y-axis-0']; 

     ctx.save(); 
     ctx.beginPath(); 
     ctx.moveTo(xaxis.getPixelForValue(undefined, index), yaxis.left); 
     ctx.strokeStyle = '#ff0000'; 
     ctx.lineTo(xaxis.getPixelForValue(undefined, index), yaxis.right); 
     ctx.stroke(); 
     ctx.restore(); 
    } 
    } 
}); 

var config = { 
    type: type, 
    data: jQuery.extend(true, {}, data), 
    options: this.chartdata.options, 
    lineAtIndex: 2 
}; 

new Chart(ctx, config); 

Answer 1

विकल्प

: मैं, चार्ट में कुछ क्षैतिज लाइनों आकर्षित करने की आवश्यकता करने के लिए कुछ इसी तरह।

1. आप मिश्रण चार्ट प्रकार (Example Here) बना सकते हैं। यह आपको अपनी लाइन बनाने के लिए लाइन चार्ट जोड़ने की अनुमति देगा।
2. आप एक प्लगइन बना सकते हैं (नीचे उदाहरण देखें)।

विकल्प 2 मैं अनुशंसा करता हूं क्योंकि यह आपको लाइनों की उपस्थिति पर अधिक नियंत्रण रखने की अनुमति देता है।

फिक्स

demo of the plugin

Chart.js अब supports plugins। यह आपको अपने चार्ट में इच्छित सुविधाओं को जोड़ने की अनुमति देता है!

प्लगइन बनाने के लिए आपको किसी घटना के बाद कोड चलाने की आवश्यकता होगी और आवश्यकतानुसार चार्ट/कैनवास संशोधित करें।

var horizonalLinePlugin = { 
    afterDraw: function(chartInstance) { 
    var yValue; 
    var yScale = chartInstance.scales["y-axis-0"]; 
    var canvas = chartInstance.chart; 
    var ctx = canvas.ctx; 
    var index; 
    var line; 
    var style; 

    if (chartInstance.options.horizontalLine) { 
     for (index = 0; index < chartInstance.options.horizontalLine.length; index++) { 
     line = chartInstance.options.horizontalLine[index]; 

     if (!line.style) { 
      style = "rgba(169,169,169, .6)"; 
     } else { 
      style = line.style; 
     } 

     if (line.y) { 
      yValue = yScale.getPixelForValue(line.y); 
     } else { 
      yValue = 0; 
     } 

     ctx.lineWidth = 3; 

     if (yValue) { 
      ctx.beginPath(); 
      ctx.moveTo(0, yValue); 
      ctx.lineTo(canvas.width, yValue); 
      ctx.strokeStyle = style; 
      ctx.stroke(); 
     } 

     if (line.text) { 
      ctx.fillStyle = style; 
      ctx.fillText(line.text, 0, yValue + ctx.lineWidth); 
     } 
     } 
     return; 
    } 
    } 
}; 
Chart.pluginService.register(horizonalLinePlugin);