Prototype图表插件 Plotr

码农软件 · 软件分类 · 报表/图表制作 · 2019-08-21 14:59:06

软件介绍

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>

效果如下:

本文地址:https://www.codercto.com/soft/d/12856.html

点石成金

点石成金

[美] 克鲁格 (Steve Krug) / 蒋芳 / 机械工业出版社 / 2015-1-1 / CNY 59.00

《点石成金:访客至上的Web和移动可用性设计秘笈(原书第3版)》是一本关于Web设计原则而不是Web设计技术的书。《点石成金:访客至上的Web和移动可用性设计秘笈(原书第3版)》作者是Web设计专家,具有丰富的实践经验。他用幽默的语言为你揭示Web设计中重要但却容易被忽视的问题,只需几个小时,你便能对照书中讲授的设计原则找到网站设计的症结所在,令你的网站焕然一新。一起来看看 《点石成金》 这本书的介绍吧!

MD5 加密
MD5 加密

MD5 加密工具

html转js在线工具
html转js在线工具

html转js在线工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具