安装

npm i single-plotly

导入

// ES6 module
import singelPlotly from 'single-plotly'

// CommonJS
cosnt singelPlotly = require('single-plotly')

使用

// 饼图
const options = {
  data: [19, 26, 55], // 使用二维数组可以绘制多个饼图
  label: ['Residential', 'Non-Residential', 'Utility'],
  dataConfig: {}, // 数据配置项
}
const chartConfig = { // 图表配置
  height: 400,
  width: 500,
  // grid: {rows: 2, columns: 2} // 多组数据搭配布局使用
}
singelPlotly.drawPieChart('chartContent', options, chartConfig)

// 柱状图
const options = {
  data: [20, 14, 23], // 多个柱状图使用二维数组
  label: ['giraffes', 'orangutans', 'monkeys'],
  dataConfig: {}, // 数据配置项
}
const chartConfig = { // 图表配置
  barmode: 'group'
}
singelPlotly.drawBarChart('chartContent', options, chartConfig)

// 折线图
const options = {
  data: [
    {
      name: 'line1', // 折线图名称
      xdata: [14, 15, 18, 20],
      ydata: [12, 5, 13, 17],
    },
    {
      name: 'line2',
      xdata: [12, 13, 15, 16],
      ydata: [10, 15, 13, 17],
    }
  ],
  dataConfig: {}, // 数据配置项
}
const chartConfig = { // 图表配置
  title: 'Line Chart',
}
singelPlotly.drawLineChart('chartContent', options, chartConfig)

使用文档

// https://plotly.com/javascript/

开源协议

ISC