манипулирование данными для графа Highcharts с использованием JavaScript - PullRequest
Новая
       28

манипулирование данными для графа Highcharts с использованием JavaScript

0 голосов
/ 28 сентября 2018

Я пытаюсь построить график рассеяния, используя библиотеку Highcharts.Я получаю некоторые результаты из своей базы данных и форматирую их на уровне переднего конца, используя javascript (функция transformGraph2Data в следующем коде выполняет эту работу - я не включаю здесь код этой функции, чтобы вопрос был ясным и кратким).Более конкретно, у меня есть следующий фрагмент кода: 

<script type="text/javascript">
var graph2dataa;
function plotGraph2() {
    graph2dataa = transformGraph2Data(<%=graph2data%>);

    console.log(graph2dataa);
    console.log(typeof graph2dataa);

    Highcharts.chart('graphDiv2', {
        chart: {
            type: 'scatter',
            zoomType: 'xy',
            events: {
                click: function (e) {
                    var x = e.xAxis[0].value,
                        y = e.yAxis[0].value,
                        series = this.series[0];
                        series.addPoint([x, y]);
                }
            }
        },
        xAxis: {
            title: {
                enabled: true,
                text: '<b><%=graph2XaxisTitle%></b>'
            },
            startOnTick: true,
            endOnTick: true,
            showLastLabel: true,
            plotLines: [{
                value: 0,
                color: 'red',
                dashStyle: 'shortdash',
                width: 2
            }]
        },
        yAxis: {
            title: {
                text: '<b><%=graph2YaxisTitle%></b>',
                style: {
                    fontWeight: 'normal'
                }
            },
            plotLines: [{
                value: 0,
                color: 'red',
                dashStyle: 'shortdash',
                width: 2
            }]
        },
        plotOptions: {
            series: {
                cursor: 'pointer',
                turboThreshold: 0
            },
            scatter: {
                marker: {
                    radius: 2,
                    states: {
                        hover: {
                            enabled: true,
                            lineColor: 'rgb(100,100,100)'
                        }
                    }
                }
            }
        },
        graph2dataa //THIS VARIABLE HOLDS THE ACTUAL DATA I'D LIKE TO PLOT
    });
}
</script>

Переменная graph2dataa получает следующее строковое значение: series: [{ name: "22h - 4h", color: "#000000", data: [{ name: "HACD3", x: 0.417666669, y: 1.841010179 }, { name: "VPS53", x: 0.113499999, y: 0.153579771 }, { name: "IPO11", x: -0.300000004, y: 0.734065117 }, { name: "FIP1L1", x: 0.067000012, y: 0.165934747 }, { name: "HSPE1", x: 0.186666687, y: 0.407514478 }] }], которое является допустимым и может быть построено, если я его жестко закодирую.Проблема возникает, когда я пытаюсь передать это значение с помощью переменной graph2dataa.

Есть идеи, что я делаю неправильно?

1 Ответ

0 голосов
/ 01 октября 2018

Высокие диаграммы требуют определенной последовательной структуры, и это должен быть массив объектов, а не строка.Ваша transformGraph2Data функция должна возвращать правильную структуру, которая выглядит следующим образом: 

var graph2dataa = [{
    name: "22h - 4h",
    color: "#000000",
    data: [{
        name: "HACD3",
        x: 0.417666669,
        y: 1.841010179
    }, {
        name: "VPS53",
        x: 0.113499999,
        y: 0.153579771
    }, {
        name: "IPO11",
        x: -0.300000004,
        y: 0.734065117
    }, {
        name: "FIP1L1",
        x: 0.067000012,
        y: 0.165934747
    }, {
        name: "HSPE1",
        x: 0.186666687,
        y: 0.407514478
    }]
}]

Демонстрационная версия: http://jsfiddle.net/BlackLabel/4ath23yo/

...