Google giống như Cổ Chart/Line Chart

Question

Tôi đang tìm kiếm một phong cách cụ thể của Javascript hoặc SVG thư viện biểu đồ tương tự như một Google Chart (example)

tôi đã tìm kiếm một thời gian nhưng không thể tìm thấy bất cứ điều gì gần giống với phong cách này, và tôi tò mò liệu có ai có thể chỉ cho tôi đúng hướng để đạt được kết quả cuối cùng tương tự hay không.

Tôi đã xem xét Google Visualization API và cố gắng tạo một Line Chart in JSFiddle nhưng dường như không thể tái tạo kiểu thiết kế đó. Lời khuyên nào?

See Example Image 

Javascript, SVG và AngularJS đều được chấp nhận cho phần thưởng thưởng. Điểm thưởng cho SVG.

Answer 1

này là gần nhất tôi đã quản lý để có được, và tôi nghĩ rằng tôi đã làm một công việc khá tốt cho các yêu cầu.

Nếu bạn muốn chú giải công cụ luôn hiển thị khi bạn di chuột qua biểu đồ (Example: Google Trends), điều này có thể được thực hiện với tùy chọn focusTarget(Example JSFiddle) hiện chỉ hoạt động với biểu đồ Google cổ điển chứ không phải biểu đồ tài liệu mới.

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>