Highcharts图表不可见

时间:2016-06-30 08:37:47

标签: javascript jquery angularjs highcharts frontend

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

在我的代码中有两行,一行正常,另一行无效。 (我评论过他们)

//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>

1 个答案:

答案 0 :(得分:1)

我假设你想要来自value的{​​{1}}。您已遍历此行中的risk的每个项目:risk

要获取$.each(data.data.risk, function (i, d) {的值,请使用以下行:risk

您可以查看以下示例。

data3.push([new Date(d.timestamp).getTime(),d.value]);

<强>输出: enter image description here