html设置缩放级别,javascript – 在Vis.js中设置缩放级别

我有一个网络,我正在使用vis.js构建,但它在宽度方面太大,无法放入页面的容器中.网络从左到右运行,包含有关特定进程的步骤.当一个人完成任务时,服务器会提供新的

JSON记录来更新颜色.

由于布局,我无法更改容器大小.当网络加载时,它会导致字体非常小且不可读.有没有办法可以将缩放级别设置为一个选项,以便只显示该过程中的当前步骤？

function draw() {

test = null;

// create a network

var testContainer = document.getElementById('testing');

// create some nodes

var width = testing.clientWidth;

var nodes = [

{id: 1, x: 0, y: 1, label: 'Start', color: 'green', shape: 'circle'},

{id: 2, label: 'Step 2', shape: 'square'},

{id: 3, label: 'Step 3', shape: 'square'},

{id: 4, label: 'Step 4', shape: 'square'},

{id: 5, label: 'Step 5', shape: 'square'},

{id: 6, label: 'Step 6', shape: 'square'},

{id: 7, label: 'Step 7', shape: 'square'},

{id: 8, label: 'Step 8', shape: 'square'},

{id: 9, label: 'Step 9', shape: 'square'},

{id: 10, label: 'Step 10', shape: 'square'},

{id: 11, label: 'Step 11', shape: 'square'},

{id: 12, x: width * 2, y: 1, label: 'Success!', shape: 'circle'}

];

// create some edges

var edges = [

{from: 1, to: 2, style: 'arrow', color: 'red', width: 1, length: 200}, // individual length definition is possible

{from: 2, to: 3, style: 'arrow', width: 1, length: 200},

{from: 3, to: 4, style: 'arrow', width: 1, length: 200},

{from: 4, to: 5, style: 'arrow', width: 1, length: 200},

{from: 5, to: 6, style: 'arrow', width: 1, length: 200},

{from: 6, to: 7, style: 'arrow', width: 1, length: 200},

{from: 7, to: 8, style: 'arrow', width: 1, length: 200},

{from: 8, to: 9, style: 'arrow', width: 1, length: 200},

{from: 9, to: 10, style: 'arrow', width: 1, length: 200},

{from: 10, to: 11, style: 'arrow', width: 1, length: 200},

{from: 11, to: 12, style: 'arrow', width: 1, length: 200}

];

var testData = {

nodes: nodes,

edges: edges

};

var testOptions = {

width: '100%'

};

var test = new vis.Network(testContainer, testData, testOptions);

}