发表于 | 分类于

说明：本文所用代码可在https://github.com/18202409203/CompassClock下载。

The file offered a function Clock with one parameter option, its properties is below:
在Clock.js中，该文件提供一个函数Clock, 函数需要传入一个参数option, 默认配置如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
option = {
    containerId: "canvas", // DOM容器
    // 格式化函数
    formatterMonth: d => d,
    formatterDay: d => d,
    formatterWeek: d => d === 0 ? 7 : d,
    formatterHour: d => d,
    formatterMinute: d => d,
    formatterSecond: d => d,
    gap: 50, // 每层之间的间隔
    freshTime: 500, // 刷新时间
    currentColor: 'red', // 当前时间的颜色
    rotateText: false, // 文字是否旋转
    randomColor: true // 是否开启随机颜色
}

Note: containerId is necessary, the others have default value.
注意： containerId 是必须的，其余的参数有默认值，可以省略.

1
<script src="Clock.js"></script>

After import Clock.js, a “HOW TO USE” example is below:
在自己的页面引入Clock.js后，一个调用的例子如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// test Data
var option = {
    containerId: "canvas",
    formatterMonth: d => d,
    formatterDay: d => d,
    formatterWeek: d => d === 0 ? 7 : d,
    formatterHour: d => d,
    formatterMinute: d => d,
    formatterSecond: d => d,
    gap: 50,
    freshTime: 500,
    currentColor: 'red',
    rotateText: false,
    randomColor: true,
    layers: ['Year','Month','Day','Week','Hour','Minute','Second']
}
new Clock(option).run();

发表于 | 更新于 | 分类于

说明：本文所用代码可在https://github.com/18202409203/relationMatrix下载。

使用D3.js编写了relationMatrix.js，该文件提供一个函数relationMatrix, 函数需要传入一个参数options, 默认配置如下： 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
options = {
    margin: { top: 50, right: 50, bottom: 100, left: 100 }, // 边缘
    data: [],  // 数据，二维数组的格式
    container: "canvas", // 需要绘入图表的DOM元素的ID
    labels: [], // 标签数组
    max: {
        color: "red", // 最大颜色
        value: 1 // 最大值
    },
    min: {
        color: "blue" // 最小颜色
        value: -1 // 最小值
    },
    cellSize: 60, // 每个格子的大小
    isSymmetry: true // 是否对称
}

在自己的页面引入relationMatrix.js后，一个调用的例子如下： 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
// test Data
function makeArray(length){
    let result = [];
    for(let i = 0; i < length; i ++){
        let array_i = [];
        for(let j = 0; j < length; j ++){
            array_i.push(Math.random() * 2 - 1);
        }
        result.push(array_i);
    }
    return result;
}
function makeLabel(length){
    let result = [];
    for(let i = 0; i < length; i ++){
        result.push(Math.random().toString(36).slice(-3));
    }
    return result;
}
var options = {
    margin: { top: 50, right: 50, bottom: 100, left: 100 },
    data: [],
    container: "canvas",
    labels: [],
    max: {
        value: 1
    },
    min: {
        value: -1
    },
    cellSize: 60,
    isSymmetry: true
}
function paint(){
    var num = 10;
    options.data = makeArray(num);
    options.labels = makeLabel(num);
    relationMatrix(options);
}
paint();