Как перенести график из демонстрации Highcharts в облако Highcharts

Question

Возможно, другие видели удивительную демонстрацию Force-Directed Network Graph , которую я очень хотел бы адаптировать к своим собственным целям.Тем не менее, простого копирования кода не достаточно.

Я больше не использую встроенные данные, а скорее данные, поступающие из файла Google Sheets.И я изменил код, чтобы он содержал больше столбцов в данных.Вот jsfiddle , но без подключения к Google Sheets.(Я пробовал соединение с Google Sheets там, но оно не работает - по причинам, которые еще предстоит выяснить. Соединение является общедоступным, если кто-то хочет возиться.)

Итак, вот код, который я сбросилв панель «Пользовательский код» в разделе «Настройка» облака Highcharts.

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

Облако Highcharts пока не поддерживает форсированный граф .

Для этой серии требуется модуль сетевого графика (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"
  ];

Answer 2

Я не решил эти 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"
      }
});