1

我正在尝试将 JSON 数据输出到 Highstock 图表。最初，我为 JSON 格式的日期而苦苦挣扎，我按照关于 stackoverflow 上其他答案的说明通过重新格式化日期来解决这个问题。但我仍然无法在视图页面上绘制图表 -

 <script src="http://code.highcharts.com/stock/highstock.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var mydata =[];
        chartOjb = new Object();
        $.ajax({
            type: "GET",
            url: "/ReportIntance/DummyCall/2",
            data: '{ }',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                $.each(data, function (index, item) {
                    chartOjb.name = new Date(parseInt(item.DayDate.replace("/Date(", "").replace(")/", ""), 10));
                    chartOjb.data = item.Series1;
                    mydata.push({
                        x: new Date(parseInt(item.DayDate.replace("/Date(", "").replace(")/", ""), 10)),
                        y: item.Series1
                    });
                })
            },
            failure: function (response) {
                alert(response);
            }

        });
        chart1 = new Highcharts.Chart({
            chart: {
                renderTo: 'Chart1'
            },
            title: {
                text: 'Delivery Price example using Chart'
            },
            xAxis: {
                type: 'datetime'
            },
            yAxis: {
                title: {
                    text: 'Price'
                }
            },
            series: [ { data: mydata }]
        });
    });
</script>
<div id="Chart1" style="height: 500px; min-width: 500px"></div>

我的 JSON 字符串是 -

[{"DayDate":"\/Date(1334704500000)\/","Series1":4.01,"Series2":0,"Series3":0,"Series4":0,"Series5":0},
{"DayDate":"\/Date(1334705400000)\/","Series1":5.01,"Series2":0,"Series3":0,"Series4":0,"Series5":0},
{"DayDate":"\/Date(1334706300000)\/","Series1":4.51,"Series2":0,"Series3":0,"Series4":0,"Series5":0},
{"DayDate":"\/Date(1334707200000)\/","Series1":6.01,"Series2":0,"Series3":0,"Series4":0,"Series5":0},
{"DayDate":"\/Date(1334708100000)\/","Series1":4.71,"Series2":0,"Series3":0,"Series4":0,"Series5":0},
{"DayDate":"\/Date(1334709000000)\/","Series1":7.01,"Series2":0,"Series3":0,"Series4":0,"Series5":0},
{"DayDate":"\/Date(1334709900000)\/","Series1":7.01,"Series2":0,"Series3":0,"Series4":0,"Series5":0}]

目前我正在尝试输出简单的折线图并仅使用 DayDate（X 轴）和“Series1”作为 Y 轴。

Highstock 图表仅显示“x 轴”，但未显示折线图或 y 轴。

有人可以指出我做错了什么吗？任何帮助将不胜感激。

编辑：

设置turboThresold字段后，我现在可以在我的 highstock 图表上看到 X 轴。但是仍然缺少 y 轴的值。这是没有任何 y 轴线的图形的外观。数据似乎是正确的

这是我更新的代码 -

$(function () {
        var mydata = [];
        chartOjb = new Object();
        // See source code from the JSONP handler at https://github.com/highslide-software/highcharts.com/blob/master/samples/data/from-sql.php
        $.getJSON('/ReportIntance/DummyCall/2', function (data) {

            // Add a null value for the end date 
            //data = [].concat(data, [[Date.UTC(2013, 9, 14, 19, 59), null, null, null, null]]);

            $.each(data, function (index, item) {
                chartOjb.name = new Date(parseInt(item.DayDate.replace("/Date(", "").replace(")/", ""), 10));
                chartOjb.data = item.Series1;
                mydata.push({ x: chartOjb.name, y: parseFloat(chartOjb.data) });

                //alert(chartOjb.name + "/" + chartOjb.data);
            });


            // create the chart
            $('#container').highcharts('StockChart', {
                chart: {
                    //type: 'candlestick',
                    zoomType: 'x'
                },

                navigator: {
                    adaptToUpdatedData: false,
                    series: {
                        data: mydata
                    }
                },

                scrollbar: {
                    liveRedraw: false
                },

                title: {
                    text: 'Historical prices from June 2012'
                },

                subtitle: {
                    text: 'Displaying 20K records using Highcharts Stock by using JSON'
                },
                plotOptions: {
                    line: {
                        turboThreshold: 20450
                    }
                },
                xAxis: {
                    type: 'datetime',
                    title: 'Time',
                    minRange: 3600 * 1000/15 // one hour
                },
                yAxis:{
                    title: {
                        text: 'Prices',
                        style: {
                            color: '#89A54E'
                        }
                    },
                    lineWidth: 1,
                    opposite: false,
                    showEmpty: false //hides empty data series
                },
                series: [{
                    data: data,
                    pointStart: Date.UTC(2012, 6, 1), // first of June
                    pointInterval: 3600 * 1000/15,  
                    dataGrouping: {
                        enabled: false
                    }
                }]
            });
        });
    });

在此处输入图像描述

4

1 回答 1

0

感谢 Sebastian，我现在可以看到图表。我遇到的唯一问题是我没有指向正确的“数据”您不转换为日期时间的建议提高了性能

于 2013-09-10T11:48:06.790 回答