Google चार्ट में दृश्यमान रेखाएं

Question

मैं Google चार्ट लिख रहा हूं। यह कॉलम ढेर है। इसके शीर्ष पर मैं 2 लाइनों को आकर्षित करना चाहता हूं, जो न्यूनतम और अधिकतम अनुमत मान इंगित करता है।

एकमात्र समाधान मैं के साथ, ComboCharts का पहला उदाहरण को संशोधित किया गया था आया। मेरे परिणाम इस प्रकार है:

कौन सा पर्याप्त नहीं है। ग्राफ परिवर्तनीय है, इसलिए यदि केवल 1 क्वार्टल दिखाया गया है, तो लाइन पूरी तरह से एक बिंदु होगी। मेरे प्रश्न हैं:

• क्या लाइन को आगे खींचने का कोई तरीका है, तो यह ग्राफ की बाएं और दाएं सीमा को हिट करता है?
• क्या मैं ग्राफ में लाइनों को ग्राफ में खींच सकता हूं, बिना किसी अन्य डेटापॉइंट का नाटक किए?

यदि आप चाहें तो कॉम्बो चार्ट here के साथ आप परेशान हो सकते हैं।

Answer 1

आप एक अलग (स्ट्रिंग-आधारित) एक्स-अक्ष के साथ किनारे से किनारे जाने के लिए लाइन नहीं प्राप्त कर सकते हैं। यदि आप निरंतर (संख्या, दिनांक, डेटाटाइम, टाइमफ़ोडे) धुरी पर स्विच करते हैं, तो आप अपने वास्तविक डेटा से पहले एक पंक्ति जोड़ सकते हैं और उसके बाद एक पंक्ति में लक्ष्य रेखाएं (और अन्य डेटा श्रृंखला के लिए नल) शामिल हैं:

function drawChart() { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('number', 'Quarter'); 
    data.addColumn('number', 'Value 1'); 
    data.addColumn('number', 'Value 2'); 
    data.addColumn('number', 'Value 3'); 
    data.addColumn('number', 'Goal 1'); 
    data.addColumn('number', 'Goal 2'); 
    data.addRows([ 
     [0, null, null, null, 10, 14], 
     [1, 5, 4, 7, null, null], 
     [2, 6, 9, 6, null, null], 
     [3, 2, 6, 4, null, null], 
     [5, null, null, null, 10, 14] 
    ]); 

    var chart = new google.visualization.ComboChart(document.querySelector('#chart_div')); 
    chart.draw(data, { 
     height: 400, 
     width: 600, 
     isStacked: true, 
     legend: { 
      position: 'top' 
     }, 
     seriesType: 'bars', 
     interpolateNulls: true, 
     series: { 
      3: { 
       type: 'line' 
      }, 
      4: { 
       type: 'line' 
      } 
     }, 
     hAxis: { 
      format: 'Q#', 
      ticks: [1, 2, 3, 4], 
      viewWindow: { 
       min: 0.5, 
       max: 4.5 
      } 
     }, 
     chartArea: { 
      left: '10%', 
      width: '80%' 
     } 
    }); 
} 
google.load('visualization', '1', {packages:['corechart'], callback: drawChart}); 

कार्य उदाहरण देखें: http://jsfiddle.net/asgallant/W67qU/