The List!
It’s very likely incomplete. If there are SVG-outputting charting libraries that I missed, drop ’em in the comments!
I’m not going to leave a bunch of commentary on each one. The list of considerations is so deep and variable, it’s really up to you to check these out and make a choice. I’m going to snap some screenshots here to showcase some things each has to offer, as well a live demo (if I can find one). This doesn’t comprehensively show what each is capable of, it’s just a taste.
AMCHARTS
HIGHCHARTS
ZINGCHART
FUSIONCHARTS
GOOGLE CHARTS
PLOTLY
XCHARTS
MORRIS.JS
UVCHARTS
CONTOUR
CHARTIST
N3-CHARTS
EMBER CHARTS
REACT SVG CHART
Options That Use <canvas>
I’m far more into <svg>, but if you have a good reason to go for canvas, here’s some others:
Good luck! And let us know if you’ve had any success with any of these in particular.
Getting started
1 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
2 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
3 <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
4 <script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
If you don’t want to use the CDN-hosted assets, then you can extract them from the zip bundle and upload them to your own site.
Your first chart
Start by adding a
<div> to your page that will contain your chart. Make sure it has an ID so you can refer to it in your Javascript later.<div id="myfirstchart" style="height: 250px;"></div>
Note: in order to display something, you’ll need to have given the div some dimensions. Here I’ve used inline CSS just for illustration.
Next add a
<script> block to the end of your page, containing the following javascript code:new Morris.Line({
// ID of the element in which to draw the chart.
element: 'myfirstchart',
// Chart data records -- each entry in this array corresponds to a point on
// the chart.
data: [
{ year: '2008', value: 20 },
{ year: '2009', value: 10 },
{ year: '2010', value: 5 },
{ year: '2011', value: 5 },
{ year: '2012', value: 20 }
],
// The name of the data record attribute that contains x-values.
xkey: 'year',
// A list of names of data record attributes that contain y-values.
ykeys: ['value'],
// Labels for the ykeys -- will be displayed when you hover over the
// chart.
labels: ['Value']
});
Assuming everything’s working correctly, you should see the following chart on your page:
2008
Value: 20
What Next?
bar sample
html5
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://cdn.oesmith.co.uk/morris-0.4.1.min.js"></script>
<meta charset=utf-8 />
<title>Morris.js Bar Chart Example</title>
</head>
<body>
<div id="bar-example"></div>
</body>
</html>
javascript
element: 'bar-example',
data: [
{ y: '2006', a: 100, b: 90 },
{ y: '2007', a: 75, b: 65 },
{ y: '2008', a: 50, b: 40 },
{ y: '2009', a: 75, b: 65 },
{ y: '2010', a: 50, b: 40 },
{ y: '2011', a: 75, b: 65 },
{ y: '2012', a: 100, b: 90 }
],
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['Series A', 'Series B']
});
CSS
沒有留言:
張貼留言