Plotr 介绍
Plotr是一个基于PlotKit与MochiKit的轻量级Javascript制图库。Plotr依赖于prototype以及HTML
Canvas。
Plotr 的使用相当简单，下面是Plotr的官方示例：
<div><canvas id="bars1" height="300" width="500"></canvas></div> <script type="text/javascript"> // Define a dataset. var dataset = { 'myFirstDataset': [[0, 1], [1, 1], [2, 1.414], [3, 1.73], [4, 2.56]], 'mySecondDataset': [[0, 0.3], [1, 2.67], [2, 1.34], [3, 1.73], [4, 1.9]], 'myThirdDataset': [[0, 0.46], [1, 1.45], [2, 2.5], [3, 1.2], [4, 2.4]], 'myFourthDataset': [[0, .86], [1, 0.83], [2, 3], [3, 1.73], [4, 0.76]], }; // Define options. var options = { // Define a padding for the canvas node padding: {left: 30, right: 0, top: 10, bottom: 30}, // Background color to render. backgroundColor: '#d8efb0', // Use the predefined blue colorscheme. colorScheme: 'grey', // Render a horizontal oriented barchart. barOrientation: 'vertical', // Set the labels. xTicks: [ {v:0, label:'day 1'}, {v:1, label:'day 2'}, {v:2, label:'day 3'}, {v:3, label:'day 4'} ] }; // Instantiate a new BarCart. var vertical = new Plotr.BarChart('bars1',options); // Add a dataset to it. vertical.addDataset(dataset); // Render it. vertical.render(); </script>
效果如下：
Plotr 官网
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。