当前位置:主页 > JavsScript库 > 图表 >

JavaScript渲染数学函数和图形 - Plotta.js
栏目分类:图表   发布日期:2021-09-22   浏览次数:

Plotta.js 一个普通的 JavaScript 绘图库,用于使用 JavaScript 和 HTML 画布元素绘制/绘制数学函数。

基本用法:

下载 plotta.js 库并将其导入 HTML 文件。

<script src="dist/plotta.js"></script>

创建一个要在其上绘制数学函数的 HTML5 画布元素。

<canvas id="canvas"></canvas>

为数学函数准备数据。

const xy = x => x;
const testData = {
  linedatas: [
    {
      id: 'line1',
      type: 'func',
      legend: 'cos',
      color: '#55A8DE',
      visible: true,
      func: Math.cos,
      dotNum: 1000
    },
    {
      id: 'line2',
      type: 'func',
      legend: 'sin',
      color: '#A2CCB6',
      visible: true,
      func: Math.sin,
      dotNum: 1000
    },
    {
      id: 'line3',
      type: 'func',
      legend: 'x = y',
      color: '#C94346',
      visible: true,
      func: xy,
      dotNum: 1000
    },
    {
      id: 'line4',
      type: 'func',
      legend: 'sinh',
      color: '#F7CE6F',
      visible: true,
      func: Math.sinh,
      dotNum: 1000
    },
    {
      id: 'line5',
      type: 'func',
      legend: 'cosh',
      color: '#9168F6',
      visible: true,
      func: Math.cosh,
      dotNum: 1000
    }
  ],
  config: {
    font: '',
    legendVisible: true,
    title: {
      location: 'center',
      color: '#666666',
      text: 'Plotta.js'
    },
    grid: {
      type: '',
      visible: true,
      color: '#888888'
    },
    border: {
      type: '',
      visible: true,
      color: '#DDDDDD',
      width: 1
    },
    tics: {
      visible: true,
      color: '#888888',
      value: {
        x: 2,
        y: 2
      }
    },
    axis: {
      x: {
        visible: true,
        label: 'X',
        color: '#666666',
        location: 'center',
        range: {
          start: -10,
          end: 10
        }
      },
      y: {
        visible: true,
        label: 'Y',
        color: '#666666',
        location: 'center',
        range: {
          start: -10,
          end: 10
        }
      }
    },
    table: {
      visible: true
    }
  }
};

将数据绘制为数学函数和图形。

const canvas = document.getElementById("canvas");
var plotta = new Plotta(canvas, testData);

API 方法。

const canvas = document.getElementById("canvas"); 
var plotta = new Plotta(canvas, testData); 
 
// 更新数据
plotta.UpdateGraph(new data) 
 
// 添加新行
plotta.AddLine(line data) 
 
// 删除一行
DeleteLine(line id) 
 
// 设置字体
SetFont(font) 
 
// 设置标题
SetTitle(title) 
 
// 设置标题颜色
SetTitleColor(color) 
 
// 设置标题位置:左、中或右
SetTitleLocation(location) 
 
// 显示网格
ShowGrid(true or false) 
 
// 设置网格颜色
SetGridColor(color) 
 
// 显示边框
ShowBorder( true or false) 
 
// 设置边框颜色
SetBorderColor(color)
 
// 设置边框宽度
SetBorderWidth(width) 
 
// 显示刻度
ShowTics(true or false) 
 
// 设置刻度颜色
SetTicsColor(color) 
 
// 设置刻度值
SetTicsValue(value) 
 
// 显示 x 轴标签
ShowAxisXLabel(true or false) 
 
// 设置 x 轴标签
SetAxisXLabel(label) 
 
// 设置 x 轴标签颜色
SetAxisXLabelColor(color) 
 
// 设置 x 轴标签位置
SetAxisXLabelLocation(location) 
 
// 显示 y 轴标签
ShowAxisYLabel(true or false) 
 
//设置 y 轴标签
SetAxisYLabel(label) 
 
// 设置 y 轴标签颜色
SetAxisYLabelColor(color) 
 
// 设置 y 轴标签位置
SetAxisYLabelLocation(location) 
 
// 显示表格
ShowTable(true or false)

官方网站:https://github.com/iamsjy17/Plotta.js

相关热词: Plotta.js

相关下载
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库