Google jak Wykres Grafika/Wykres liniowy

Question

Szukam konkretnego stylu JavaScript lub SVG wykres biblioteki, która przypomina Google Chart (example)

Szukałem jakiegoś czasu, ale nie mogę znaleźć nic który bardzo przypomina ten styl i byłam ciekawa, czy ktoś może wskazać mi właściwy kierunek, aby osiągnąć podobny efekt końcowy.

Zajrzałem do Google Visualization API i próbowałem wykonać Line Chart in JSFiddle, ale nie mogę powielić tego stylu. Jakakolwiek rada?

See Example Image 

Javascript, SVG i AngularJS są akceptowane w nagrodę za nagrodę. Punkty bonusowe za SVG.

Answer 1

Jest to najbliżej udało mi się dostać, i myślę, że zrobiliśmy kawał dobrej roboty podane wymagania.

Jeśli chcesz podpowiedź zawsze pokazują kiedy unoszące się nad wykresem (Example: Google Trends) Można to osiągnąć za pomocą opcji focusTarget(Example JSFiddle) która obecnie działa tylko z wykresów Klasyczny Google, a nie nowe wykresy materialne.

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>