Question

也许其他人已经看到了令人惊叹的Force-Directed Network Graph演示，我非常希望能够适应自己的目的。但是，仅仅复制代码似乎还不够。

我不再使用内联定义的数据，而是使用来自Google表格文件的数据。而且我已经修改了代码，使其在数据中包含更多列。尽管没有Google表格连接，但这是jsfiddle。（我已经在该处尝试过Google Sheets连接，但由于尚未发现的原因而无法使用。如果有人想摆弄，则该连接是公共的。）

所以这是我转储到Highcharts Cloud“自定义”部分的“自定义代码”面板中的代码。

Highcharts.addEvent(
    Highcharts.seriesTypes.networkgraph, 'afterSetOptions',
    function (e) {
        var colors = Highcharts.getOptions().colors,
            i = 0,
            nodes = {};
        e.options.data.forEach(function (link) {
            if (link[0] === 'Keyword Research') {
                nodes['Keyword Research'] = {
                    id: 'Keyword Research',
                    marker: { radius: link[2] }
                };
                nodes[link[1]] = {
                    id: link[1], marker: { radius: link[2] }, color: colors[i++]
                };
            }
            else if
                (nodes[link[0]] && nodes[link[0]].color) {
                nodes[link[1]] = {
                    id: link[1], color: nodes[link[0]].color
                };
            }
        });
        e.options.nodes = Object.keys(nodes).map(function (id) { return nodes[id]; });
    }
);
Highcharts.chart('highcharts-container',
    {
        chart: { type: 'networkgraph', height: '100%' },
        title: { text: 'The Indo-European Language Tree' },
        subtitle: { text: 'A Force-Directed Network Graph in Highcharts' },
        plotOptions: { networkgraph: { keys: ['from', 'to'], layoutAlgorithm: { enableSimulation: true, friction: -0.9 } } },
        series: [{
            dataLabels: { enabled: true, linkFormat: '' },
            "data": {
                "googleSpreadsheetKey": "1kQKkN4auaxsgwms057FkJ7l5g3mhBjR5vp5PPpStDBQ",
                "dataRefreshRate": false,
                "enablePolling": true,
                "startRow": "2",
                "endRow": "14",
                "startColumn": "1",
                "endColumn": "3"
              }
        }]
    }
);

很高兴发现如何使其工作。

LATER

在jsfiddle中包含了GoogleDrive的设置作为注释。

Answer 1

我尚未100％解决此问题，但已解决了一个可能导致您找到答案的问题。您在data中有series元素，但是在查看highcharts api的googleSpreadsheetKey时，他们已将其放在系列之外。因此，请尝试以下操作。当我这样做时，我在控制台中收到CORS错误。

Highcharts.addEvent(
    Highcharts.seriesTypes.networkgraph, 'afterSetOptions',
    function (e) {
        var colors = Highcharts.getOptions().colors,
            i = 0,
            nodes = {};
        e.options.data.forEach(function (link) {
            if (link[0] === 'Keyword Research') {
                nodes['Keyword Research'] = {
                    id: 'Keyword Research',
                    marker: { radius: link[2] }
                };
                nodes[link[1]] = {
                    id: link[1], marker: { radius: link[2] }, color: colors[i++]
                };
            }
            else if
                (nodes[link[0]] && nodes[link[0]].color) {
                nodes[link[1]] = {
                    id: link[1], color: nodes[link[0]].color
                };
            }
        });
        e.options.nodes = Object.keys(nodes).map(function (id) { return nodes[id]; });
    }
);

Highcharts.chart('highcharts-container',
{
    chart: { type: 'networkgraph', height: '100%' },
    title: { text: 'The Indo-European Language Tree' },
    subtitle: { text: 'A Force-Directed Network Graph in Highcharts' },
    plotOptions: { networkgraph: { keys: ['from', 'to'], layoutAlgorithm: { enableSimulation: true, friction: -0.9 } } },
    series: [{
        dataLabels: { enabled: true, linkFormat: '' }
    }],
    "data": {
        "googleSpreadsheetKey": "1kQKkN4auaxsgwms057FkJ7l5g3mhBjR5vp5PPpStDBQ",
        "dataRefreshRate": false,
        "enablePolling": true,
        "startRow": "2",
        "endRow": "14",
        "startColumn": "1",
        "endColumn": "3"
      }
});

Answer 2

Highcharts Cloud 目前暂不支持强制有向图。

该系列需要网络图模块（https://code.highcharts.com/modules/networkgraph.js），该模块未导入在Cloud中创建的图表。这是导入脚本的列表：

  var scripts = [
    "highcharts.js",
    "modules/stock.js",
    "highcharts-more.js",
    "highcharts-3d.js",
    "modules/data.js",
    "modules/exporting.js",
    "modules/funnel.js",
    "modules/solid-gauge.js",
    "modules/export-data.js",
    "modules/accessibility.js",
    "modules/annotations.js"
  ];

如何将图表从Highcharts演示迁移到Highcharts Cloud

2 个答案: