गूगल की तरह स्टॉक चार्ट/लाइन चार्ट

Question

मैं जैसा दिखता है कि एक Google Chart (example)

मैं कुछ समय के लिए खोज की है, लेकिन कुछ भी नहीं मिल रहा है जावास्क्रिप्ट या एसवीजी चार्ट पुस्तकालय की एक विशिष्ट शैली के लिए देख रहा हूँ जो इस शैली के साथ मिलकर मिलती है, और मैं उत्सुक था अगर कोई मुझे एक समान अंत परिणाम प्राप्त करने के लिए सही दिशा में इंगित कर सकता था।

मैंने Google Visualization API पर देखा है और Line Chart in JSFiddle बनाने की कोशिश की है लेकिन यह डिजाइन की शैली को दोहराने के लिए प्रतीत नहीं होता है। कोई सलाह?

See Example Image 

जावास्क्रिप्ट, एसवीजी, और AngularJS सभी इनाम इनाम के लिए स्वीकार्य हैं। एसवीजी के लिए बोनस अंक।

Answer 1

यह निकटतम मैं पाने में कामयाब रहे है, और मुझे लगता है कि मैं आवश्यकताओं को देखते हुए एक बहुत अच्छा काम किया है।

आप टूलटिप चाहते हैं, तो हमेशा दिखाने के लिए जब आप चार्ट (Example: Google Trends) इस focusTarget विकल्प (Example JSFiddle) जो वर्तमान में केवल नहीं नई सामग्री चार्ट क्लासिक Google चार्ट के साथ काम करता है और साथ पूरा किया जा सकता पर मँडरा रहे हैं।

google.charts.load('current', { packages: ['line'] }); 
 
google.charts.setOnLoadCallback(drawBasic); 
 

 
function drawBasic() { 
 

 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('date', 'X'); 
 
    data.addColumn('number', 'Dogs'); 
 

 
    data.addRows([ 
 
    [new Date(2015, 9, 28), 6], 
 
    [new Date(2015, 9, 29), 10], 
 
    [new Date(2015, 9, 30), 19], 
 
    [new Date(2015, 10, 0), 14], 
 
    [new Date(2015, 10, 1), 16], 
 

 
    ]); 
 

 
    var options = { 
 
    colors: ["#4184F3"], 
 
    lineWidth: 3, 
 
    legend: { 
 
     position: "none" 
 
    }, 
 
    hAxis: { 
 
     pointSize: 2, 
 
     format: 'MMM d', 
 
     title: '', 
 
     titlePosition: 'none' 
 
    }, 
 
    vAxis: { 
 
     title: 'Popularity' 
 
    } 
 
    }; 
 

 
    var chart = new google.charts.Line(document.getElementById('chart_div')); 
 
    chart.draw(data, google.charts.Line.convertOptions(options)); 
 
}

#chart_div svg g circle { 
 
    stroke: #4184F3 !important; 
 
    fill-opacity: 1; 
 
    r: 5; 
 
    fill: #4184F3 !important; 
 
    filter: none !important; 
 
} 
 
#chart_div svg g circle:hover { 
 
    r: 8 
 
} 
 
#chart_div svg g path { 
 
    stroke-width: 4 !important; 
 
    stroke: #4184F3 !important; 
 
    stroke-linejoin: bevel; 
 
    stroke-width: 1; 
 
    stroke-linecap: round; 
 
    filter: none !important; 
 
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>