Google-like Stock Chart/Liniendiagramm

Question

Ich bin für einen bestimmten Stil von Javascript oder SVG-Chart-Bibliothek suchen, der ein Google Chart (example)

seit einiger Zeit ähnelt

Ich habe gesucht, aber kann nichts finden das ähnelt diesem Stil sehr, und ich war neugierig, ob mir jemand in die richtige Richtung zeigen könnte, um ein ähnliches Endergebnis zu erzielen.

Ich habe in die Google Visualization API geschaut und versucht, eine Line Chart in JSFiddle machen, aber kann nicht scheinen, diesen Stil des Designs zu replizieren. Irgendein Rat?

See Example Image 

Javascript, SVG und AngularJS sind alle akzeptabel für die Kopfgeld-Belohnung. Bonuspunkte für SVG.

Answer 1

Dies ist der nächstgelegene ich habe es geschafft, zu bekommen, und ich glaube, ich einen ziemlich guten Job die Anforderungen gegeben hat.

Wenn Sie den Tooltip immer mögen, wenn Sie über das Diagramm sind schweben (Example: Google Trends) dieser (Example JSFiddle) mit der focusTarget Option erreicht werden kann, die derzeit nur mit klassischen Google-Charts und nicht die neuen Material-Charts funktioniert.

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>