Блог

Возможно, другие видели потрясающую демонстрацию сетевого графика, ориентированного на силу, которую я бы очень хотел адаптировать для своих целей. Однако простого копирования кода, похоже, недостаточно.

Я больше не использую встроенные данные, а скорее данные, поступающие из файла Google Sheets. И я изменил код так, чтобы он содержал больше столбцов в данных. Вот jsfiddle, хотя и без подключения к Google Sheets. (Я пробовал подключение к 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]] amp;amp; 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.

Я не решил эту проблему на 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]] amp;amp; 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"
      }
});
 

Highcharts Cloud пока не поддерживает force directed graph.

Для этой серии требуется модуль сетевого графика (https://code.highcharts.com/modules/networkgraph.js ), который не импортируется для диаграмм, созданных в облаке. Вот список импортированных скриптов:

   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"
  ];