使用 javascript 为 Highcharts 图操作数据答案

【问题标题】：manipulating data for Highcharts graph using javascript使用 javascript 为 Highcharts 图操作数据
【发布时间】：2018-09-28 13:30:04
【问题描述】：

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

任何想法我做错了什么？

【问题讨论】：

我认为你不能使用这样的变量。您应该删除graph2dataa 变量的series 部分。然后你应该设置：series: graph2dataa。示例：jsfiddle.net/ewolden/06sohLze/8
我想我明白发生了什么。我的函数 transformGraph2Data 返回一个纯字符串。在您的 jsfiddle 中，返回的 graph2dataa 的类型是一个对象。我认为问题就在这里。我会稍微改变一下我最初的问题。

标签： javascript .net highcharts scatter-plot dotnethighcharts

【解决方案1】：

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/

【讨论】：