Highcharts 应使用highchart在不更改现有节点位置的情况下添加新节点
Highcharts.chart('容器'{ 图表:{ 键入:“网络图”, 我在添加或修改节点时使用网络图,现有节点位置变化很大。如果我希望在不改变位置的情况下进行更改,我该怎么办 代码: json:Highcharts 应使用highchart在不更改现有节点位置的情况下添加新节点,highcharts,highcharts-ng,angular2-highcharts,react-highcharts,Highcharts,Highcharts Ng,Angular2 Highcharts,React Highcharts,Highcharts.chart('容器'{ 图表:{ 键入:“网络图”, 我在添加或修改节点时使用网络图,现有节点位置变化很大。如果我希望在不改变位置的情况下进行更改,我该怎么办 代码: json: 因此,您可以让我知道如何实现这一点。您可以将最大迭代次数属性归零,并在重画事件中为新点定义自定义位置: chart: { ..., events: { load: function() { var chart = this;
因此,您可以让我知道如何实现这一点。您可以将
最大迭代次数
属性归零,并在重画
事件中为新点定义自定义位置:
chart: {
...,
events: {
load: function() {
var chart = this;
setTimeout(function() {
chart.series[0].addPoint(['G', 'Z'], true);
}, 2000);
},
redraw: function() {
var newNode = this.series[0].nodes[7];
newNode.plotX = 100;
newNode.plotY = 100;
}
}
}
现场演示: API参考文献:
{
"data": [
{ "from": "OLO", "to": "CS003", "color": "#ffdd03" },
{ "from": "OLO", "to": "RGA", "color": "#ffffff" },
{ "from": "OLO", "to": "RGM", "color": "#ff0703" },
{ "from": "OLO", "to": "BDT", "color": "#ffffff" },
{ "from": "OLO", "to": "CW", "color": "#ffdd03" },
{ "from": "CS902", "to": "QTH", "color": "#ffffff" },
{ "from": "RGA", "to": "QTH", "color": "#ffdd03" },
{ "from": "RGA", "to": "CLC", "color": "#ff0703" },
{ "from": "RGM", "to": "SYE", "color": "#ffffff" },
{ "from": "SYE", "to": "CLC", "color": "#ff0703" },
{ "from": "BDT", "to": "CLC", "color": "#ffdd03" },
{ "from": "EHR", "to": "LVC", "color": "#ffffff" },
{ "from": "EHR", "to": "CLC", "color": "#ff0703" },
{ "from": "EHR", "to": "GWW", "color": "#ffffff" },
{ "from": "EHR", "to": "GWT1", "color": "#ff0703" },
{ "from": "EHR", "to": "TPZ", "color": "#ffdd03" },
{ "from": "EHR", "to": "NGC", "color": "#ffdd03" },
{ "from": "EHR", "to": "CS004", "color": "#ffffff" },
{ "from": "GWW", "to": "L/T1", "color": "#ff0703" },
{ "from": "CS004", "to": "MRT1", "color": "#ffdd03" }
],
"nodes": [
{
"id": "999 TXT",
"marker": {
"symbol": "url(assets/images/computer.png)"
}
},
{
"id": "ASU",
"marker": {
"symbol": "url(assets/images/computer.png)"
}
},
{
"id": "VRU",
"marker": {
"symbol": "url(assets/images/computer.png)"
}
},
{
"id": "Internet",
"marker": {
"symbol": "url(assets/images/computer.png)"
}
},
{
"id": "Dail IT",
"marker": {
"symbol": "url(assets/images/computer.png)"
}
},
{
"id": "VMP",
"marker": {
"symbol": "url(assets/images/computer.png)"
}
},
{
"id": "CS05",
"marker": {
"symbol": "url(assets/images/computer.png)"
}
},
{
"id": "MSP",
"marker": {
"symbol": "url(assets/images/computer.png)"
}
},
{
"id": "VO",
"marker": {
"symbol": "url(assets/images/computer.png)"
}
},
{
"id": "OR",
"marker": {
"symbol": "url(assets/images/computer.png)"
}
},
{
"id": "O2",
"marker": {
"symbol": "url(assets/images/computer.png)"
}
},
{
"id": "Mobile",
"marker": {
"symbol": "url(assets/images/computer.png)"
}
},
{
"id": "CW",
"marker": {
"symbol": "url(assets/images/computer.png)"
}
},
{
"id": "TW",
"marker": {
"symbol": "url(assets/images/computer.png)"
}
},
{
"id": "Resilient Network",
"marker": {
"symbol": "url(assets/images/computer.png)"
}
},
{
"id": "Jet",
"marker": {
"symbol": "url(assets/images/computer.png)"
}
},
{
"id": "ONLY X",
"marker": {
"symbol": "url(assets/images/computer.png)"
}
},
{
"id": "TOAD",
"marker": {
"symbol": "url(assets/images/computer.png)"
}
},
{
"id": "VUL",
"marker": {
"symbol": "url(assets/images/computer.png)"
}
},
{
"id": "CRAWLEY",
"marker": {
"symbol": "url(assets/images/computer.png)"
}
},
{
"id": "BT",
"marker": {
"symbol": "url(assets/images/computer.png)"
}
},
{
"id": "Others",
"marker": {
"symbol": "url(assets/images/computer.png)"
}
},
{
"id": "VOIP ITP",
"marker": {
"symbol": "url(assets/images/computer.png)"
}
},
{
"id": "Old Exchanges",
"marker": {
"symbol": "url(assets/images/computer.png)"
}
},
{
"id": "SDIN",
"marker": {
"symbol": "url(assets/images/computer.png)"
}
},
{
"id": "PH/1",
"marker": {
"symbol": "url(assets/images/computer.png)"
}
},
{
"id": "OLO",
"marker": {
"symbol": "url(assets/images/server.png)"
}
},
{
"id": "CS003",
"marker": {
"symbol": "url(assets/images/computer.png)"
}
},
{
"id": "RGA",
"marker": {
"symbol": "url(assets/images/computer.png)"
}
},
{
"id": "RGM",
"marker": {
"symbol": "url(assets/images/computer.png)"
}
},
{
"id": "BDT",
"marker": {
"symbol": "url(assets/images/computer.png)"
}
},
{
"id": "CS902",
"marker": {
"symbol": "url(assets/images/computer.png)"
}
},
{
"id": "QTH",
"marker": {
"symbol": "url(assets/images/computer.png)"
}
},
{
"id": "CLC",
"marker": {
"symbol": "url(assets/images/customer-service.png)"
}
},
{
"id": "SYE",
"marker": {
"symbol": "url(assets/images/computer.png)"
}
},
{
"id": "EHR",
"marker": {
"symbol": "url(assets/images/teamwork.png)"
}
},
{
"id": "LVC",
"marker": {
"symbol": "url(assets/images/computer.png)"
}
},
{
"id": "GWW",
"marker": {
"symbol": "url(assets/images/computer.png)"
}
},
{
"id": "GWT1",
"marker": {
"symbol": "url(assets/images/computer.png)"
}
},
{
"id": "TPZ",
"marker": {
"symbol": "url(assets/images/computer.png)"
}
},
{
"id": "NGC",
"marker": {
"symbol": "url(assets/images/computer.png)"
}
},
{
"id": "L/T1",
"marker": {
"symbol": "url(assets/images/computer.png)"
}
},
{
"id": "CS004",
"marker": {
"symbol": "url(assets/images/computer.png)"
}
},
{
"id": "MRT1",
"marker": {
"symbol": "url(assets/images/computer.png)"
}
}
],
"name": "Main Series",
"dataLabels": {
"draggable": "false",
"enabled": "true"
},
"link": {
"width": 3
}
}
chart: {
...,
events: {
load: function() {
var chart = this;
setTimeout(function() {
chart.series[0].addPoint(['G', 'Z'], true);
}, 2000);
},
redraw: function() {
var newNode = this.series[0].nodes[7];
newNode.plotX = 100;
newNode.plotY = 100;
}
}
}