Highcharts 图表不可见答案

【问题标题】：Highcharts graph not visibleHighcharts 图表不可见
【发布时间】：2016-06-30 08:37:46
【问题描述】：

我正在处理图表，但它不可见。

在我的代码中有两行，一行有效，另一行无效。（我评论过）

//this line does not work
//data3.push([new Date(d.timestamp).getTime(),data.data.risk);

//this line works
data3.push([new Date(d.timestamp).getTime(),data.data.threshold[0].amber_threshold]);

我的目标：我想运行不工作的线路。

我认为我没有正确传递数据。我想传递名为risk 的数组来制作图表。

只需将代码复制粘贴到文件中即可。

<!DOCTYPE html>
<html>

<head>

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

</head>

<body style="background:#212224;">

<div id="container2" style="max-width: 1666px;  margin: 0 auto"></div>

<script type="text/javascript">

   $.getJSON('https://dl.dropboxusercontent.com/u/76618626/data2.json', function (data) {
        console.log("data is : ");
        console.log(data);

                    var minX = _.min(data.data.risk, function (d) {
                        return new Date(d.timestamp).getTime();
                    });
                    var maxX = _.max(data.data.risk, function (d) {
                        return new Date(d.timestamp).getTime();
                    });


         var data3 = [];

          $.each(data.data.risk, function (i, d) {

                        //this line does not work
                        //data3.push([new Date(d.timestamp).getTime(),data.data.risk);

                        //this line works
                        data3.push([new Date(d.timestamp).getTime(),data.data.threshold[0].amber_threshold]);
                 });




        $('#container2').highcharts({

            chart: {
            backgroundColor: '#000000',
                },

            title: {
                text: 'Test Graph',
                style: {
                color: '#FFFFFF',
                fontWeight: 'bold'
                }
            },
            xAxis: {
                type: 'datetime',
                title: {
                    text: 'Time Stamp'
                },
                gridLineColor: 'grey',
                gridLineWidth: 1,
                lineWidth:1

            },
            yAxis: {
                title: {
                    text: 'Value'
                },
                gridLineColor: 'grey',
                gridLineWidth: 1,
                lineWidth:1
            },
            legend: {
                enabled: true
            },

            exporting: false,



            plotOptions: {
                line: {                 
                    lineColor: 'red',
                    fillOpacity: 1,                    
                    lineWidth: 2,
                    states: {
                        hover: {
                            lineWidth: 2
                        }
                    },
                    threshold: null,
                    marker: {
                        fillColor: '#e57255'
                        }


                },


            },

            series: [{
                name: 'Graph',
                data: data3
            }]
        });
    });

</script>
</body>
</html>

【问题讨论】：

您在控制台中是否遇到任何错误？

标签： javascript jquery angularjs highcharts frontend

【解决方案1】：

我假设您想要来自risk 的value。您已经遍历了这一行中risk 的每一项：$.each(data.data.risk, function (i, d) {

要获取risk 的值，请使用以下行：data3.push([new Date(d.timestamp).getTime(),d.value]);

您可以查看以下示例。

    <!DOCTYPE html>
    <html>

    <head>

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

    </head>

    <body style="background:#212224;">

    <div id="container2" style="max-width: 1666px;  margin: 0 auto"></div>

    <script type="text/javascript">

       $.getJSON('https://dl.dropboxusercontent.com/u/76618626/data2.json', function (data) {
            console.log("data is : ");
            console.log(data);

                        var minX = _.min(data.data.risk, function (d) {
                            return new Date(d.timestamp).getTime();
                        });
                        var maxX = _.max(data.data.risk, function (d) {
                            return new Date(d.timestamp).getTime();
                        });


             var data3 = [];

              $.each(data.data.risk, function (i, d) {

                            //this line does not works
                            data3.push([new Date(d.timestamp).getTime(),d.value]);

                            //this line works
                            // data3.push([new Date(d.timestamp).getTime(),data.data.threshold[0].amber_threshold]);
                     });




            $('#container2').highcharts({

                chart: {
                backgroundColor: '#000000',
                    },

                title: {
                    text: 'Test Graph',
                    style: {
                    color: '#FFFFFF',
                    fontWeight: 'bold'
                    }
                },
                xAxis: {
                    type: 'datetime',
                    title: {
                        text: 'Time Stamp'
                    },
                    gridLineColor: 'grey',
                    gridLineWidth: 1,
                    lineWidth:1

                },
                yAxis: {
                    title: {
                        text: 'Value'
                    },
                    gridLineColor: 'grey',
                    gridLineWidth: 1,
                    lineWidth:1
                },
                legend: {
                    enabled: true
                },

                exporting: false,



                plotOptions: {
                    line: {                 
                        lineColor: 'red',
                        fillOpacity: 1,                    
                        lineWidth: 2,
                        states: {
                            hover: {
                                lineWidth: 2
                            }
                        },
                        threshold: null,
                        marker: {
                            fillColor: '#e57255'
                            }


                    },


                },

                series: [{
                    name: 'Graph',
                    data: data3
                }]
            });
        });

    </script>
    </body>
    </html>

输出：

【讨论】：

好的，谢谢...它的工作原理...知道为什么要花这么长时间来渲染图形吗？
请复制并粘贴完整代码。等待几分钟。您的 json 有大量数据
只有 8000 分...所以知道为什么要花这么长时间吗？我已经绘制了超过 10,000 个点的图表，它们渲染得很快……
我不知道，除非我可以看到该图的代码（我的意思是逻辑）以与此进行比较。如果它适合您，请将此答案标记为已接受。谢谢
非常感谢！！！代码正在运行......你太棒了......给 +1。