【问题标题】:Highstock different time value intervalHighstock 不同时间值区间
【发布时间】:2016-02-26 13:51:27
【问题描述】:

我有一个返回图表列表的 WebService。这是我的类图的结构:

public class Point
{
    public string Date { get; set; }
    public float Value { get; set; }
}

public class Serie
{
    public string Port { get; set; }
    public string Name { get; set; }
    public string Unit { get; set; }
    public List<Point> Data { get; set; }
}

public class Chart
{
    public string Unit { get; set; }

    public List<Serie> Series { get; set; }
}

public List<Chart> charts;

我在 js 脚本中使用 HighStock 来显示我的图表列表中的所有图表。 我想按单元对我的系列进行分组,并为每个单元创建一个新的 yAxis 以显示相同的单元系列(见下图)。

这是来自js文件的代码:

<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "WebService.asmx/Channels",
            data: "{}",
            dataType: "json",
            success: function (Charts) {
                document.getElementById("debug").innerHTML = Charts.d;
                Charts = Charts.d;

                var margin = 40,
                top = 100,
                height = 160,
                count = 0;

                // Generals options for chart
                var options = {
                    credits: { enabled: false },
                    chart: {
                        renderTo: chart,
                        zoomType: 'x',
                        alignTicks: false
                    },
                    legend: {
                        enabled: true
                    },
                    title: {
                        text: 'Values'
                    },
                    tooltip: {
                        valueDecimals: 2,
                        shared: true
                    },
                    xAxis: {       
                        ordinal: false
                    },
                    yAxis: [],
                    series: []
                };

                // Go through Charts
                for (var i in Charts) {

                        // Infos for the yAxis of the serie
                        // -------------------
                        options.yAxis.push({
                            title: {
                                text: "[" + Charts[i].Unit + "]"
                            },
                            labels: {
                                x: 30,
                                y: 4,
                                align: "right",
                                format: '{value} ' + Charts[i].Unit
                            },
                            offset: 0,
                            top: top,
                            height: height,
                            opposite: true
                        });

                        // Go through Series in a Charts
                        for (var j in Charts[i].Series) {


                            // Infos for the serie
                            // -------------------
                            var data = [];

                            // Go through Data in Series of a Charts
                            for (var k in Charts[i].Series[j].Data) {
                                var point = new Array(new Date(Charts[i].Series[j].Data[k].Date).getTime(), Charts[i].Series[j].Data[k].Value);
                                data.push(point);
                            }// End: Go through Data in Series of a Charts

                            count = Number(i);

                            // Add a serie and these attributes
                            options.series.push({
                                name: Charts[i].Series[j].Name,
                                data: data,
                                tooltip: {
                                    valueSuffix: ' ' + Charts[i].Series[j].Unit,
                                    valueDecimals: 3
                                },
                                yAxis: count
                            });

                        }// End: Go through Series in a Charts

                        count++;
                        top += height + margin;

                }// End: Go through Charts

                options.chart.height = top + 190;

                Highcharts.StockChart(options);
            },
            error: function (xhr, thrownError) {
                //alert("Error : " + xhr.status + "\nMessage : \n" + xhr.responseText);
                document.getElementById("debug").innerHTML = "Error : " + xhr.status + "\nMessage : \n" + xhr.responseText;
            }
        });
    });
</script>

如果我运行代码:

Blank page no chart

我遇到的错误是:

Uncaught TypeError: Cannot read property 'clientX' of undefined -> highstock.js:177

还有(有时)这个错误:

Uncaught TypeError: Cannot read property 'info' of undefined -> highstock.js:342(不是关于#line)

如果我删除具有不同间隔的系列,或者如果取消选择 Vbatt 系列(具有不同间隔的系列),它会起作用:

All my charts are displayed

我在互联网和 StackOverflow 上花了很多时间来为我的问题寻找问题,但是……什么都没有……

编辑

-> 我们可以在同一张图表上绘制的最大系列是多少?
-> 我们可以在同一张图表上绘制的最大点是多少?

提前感谢您的反馈。

最好的问候,

史蒂夫

问题解决了!

问题是我的网络服务发送的纪元数据是以秒为单位的,而 HighStock 需要以毫秒为单位。

【问题讨论】:

  • 没有像系列或点数这样的限制(除非它不会对浏览器造成过度杀伤)。你可以试试 Highstock 的 master 分支吗?请参阅github.highcharts.com/highstock.src.js - 我想我遇到过类似的问题。另外,有没有机会在 jsfiddle 上重新创建问题?您可以使用静态数据,而不是 AJAX。

标签: javascript highcharts highstock


【解决方案1】:

问题解决了!

问题是我的网络服务发送的纪元数据是以秒为单位的,而 HighStock 需要以毫秒为单位。

【讨论】:

    猜你喜欢
    • 2013-07-02
    • 1970-01-01
    • 2014-03-16
    • 1970-01-01
    • 2013-07-16
    • 2010-11-26
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多