javascript - 如何将图表从 Highcharts Demo 迁移到 Highcharts Cloud

Question

也许其他人已经看到了惊人的Force-Directed Network Graph演示，我非常想适应我自己的目的。然而，仅仅复制代码似乎还不够。

我不再使用内嵌定义的数据，而是使用来自 Google 表格文件的数据。我修改了代码，使其在数据中包含更多列。这是一个 jsfiddle尽管没有 Google 表格连接。(我在那里尝试了 Google 表格连接，但它不起作用——原因尚待发现。如果有人想摆弄，连接是公开的。)

这是我转储到 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"
              }
        }]
    }
);

如果能知道如何让它发挥作用，那就太好了。

稍后

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

Answer 1

我还没有 100% 解决这个问题，但已经解决了一个可能会让您得到答案的问题。您在 series 中有您的 data 元素，但是在查看 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"
      }
});