时间戳

首页 > 解决方案 > 使用 javascript 为 Highcharts 图操作数据

javascript - 使用 javascript 为 Highcharts 图操作数据

问题描述

我正在尝试使用 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变量传递该值时会出现问题。

任何想法我做错了什么？

标签： javascript.nethighchartsscatter-plotdotnethighcharts

解决方案

Highcharts 需要特定的系列结构，它应该是一个对象数组，而不是字符串。您的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/

推荐阅读