缩放图

世界最具互动性的数据可视化软件

• 官方网站(简体中文) 缩放.com
• 下载页面 : 缩放.com/en/javascript-charts-library/定价/
• 许可证发放: 缩放.com/en/legal/
• 支助: 论坛.zoomcharts.com

下载并安装缩放图

请注意,使用缩略图有几种方法。 一般安装指令见 文档。 。 。 .

使用我们的CDN

与其下载,不如使用我们的CDN直接访问文件. 见 缩放.com/开发商/en/overview/installation.html 详细情况.

<script src="https://cdn.zoomcharts-cloud.com/1/stable/zoomcharts.js"></script>

从 npm 安装

见 npm 文档 如何从 npm 开始.

npm install --save @dvsl/zoomcharts

装入缩放图作为 ES6 模块

ZoomCharts可以被装入为ES6模块,使用转接器-Babel和TypeScript.

宝贝

import { TimeChart } from "@dvsl/zoomcharts" 

//Generate the chart
var t = new TimeChart({
    //options
})

类型脚本

import * as zc from "@dvsl/zoomcharts"

let TimeChart = zc.TimeChart;

//Generate the chart
var t = new TimeChart({
    //options
})

构建和调试

如果要修改缩放图或修正问题,可以自行构建文件. 缩放图采用Webpack作为构建系统.

npm i webpack webpack-cli copy-webpack-plugin --save-dev

弹出结构

.
├── index.html
├── package.json
├── index.js
└── webpack.config.js

设置 软件包.json 文件

{
  "name": "zoomcharts-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "./build/bundle.js",
  "scripts": {
    "start": "webpack --config webpack.config.js",
    "webpack": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@dvsl/zoomcharts": "^1.18.4"
  },
  "devDependencies": {
    "copy-webpack-plugin": "^4.5.2",
    "webpack": "^4.15.0",
    "webpack-cli": "^3.0.8"
  }
}

创建 网络包装. config.js 文件

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
    entry: './index.js',
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'bundle.js'
    },
    plugins: [
        new CopyWebpackPlugin([
            {
                from: './node_modules/@dvsl/zoomcharts/lib/assets',
                to: 'assets'
            }
        ])
    ]
};