javascript - Dynamic Highcharts 未更新-6ren

javascript - Dynamic Highcharts 未更新

转载作者：行者123 更新时间：2023-11-30 00:29:13

26

4

这是我的用例。我正在使用 Flume 和 Spark Streaming 来计算从服务器生成的事件数。所以在 Spark 的输出中我得到时间戳和事件数。每 10 秒后，旧值将被删除，新值将写入 HDFS 中的文件。

我已经创建了 Spring 框架，它将从 HDFS 中提取数据并将其转换为 json 并将其推送到 Highcharts。所以我试图生成一个实时样条图，它将在 x 轴上显示时间戳，在 y 轴上显示计数，并在每 10 秒后从 spark 输出中获取新数据时更新它。但是 x 轴没有移动，我可以在 y 轴上看到 10 个零值。所以我无法获得更新的 y 值。我确定我在 java 脚本中遗漏了一些东西。因为从 spring 的控制台我可以看到事件每 10 秒更新一次。但它没有反射(reflect)在图表中。

过去两周我被困在这里，迫切需要帮助。任何帮助都感激不尽。谢谢。

 <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">

    <title>Insert title here</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript" src="http://code.highcharts.com/highcharts.js" ></script>
        <script type="text/javascript" src="http://code.highcharts.com/maps/modules/exporting.js" ></script>
        <script type="text/javascript" src="http://code.highcharts.com/modules/drilldown.js"></script>
        <script src="http://code.highcharts.com/modules/exporting.js"></script>
        <script type="text/javascript" src="js/app/appStart.js" ></script>
        <link type="text/css" href="css/app.css" rel="stylesheet">
    <script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
   </head>
    <body>
        <div  class="chart" id="statusChart" >
        </div> 
    </body>

    $(function() {

        var url = 'statistics';

        $.ajax(url).done(function(data) {
            loadStatusChart(data);
        });

    });

    function updateStatusSeries(series){
        var url = 'statistics';

        $.ajax(url).done(function(data) {
            var statusCode = data.statusCode[0];
            series.addPoint([statusCode.label, statusCode.value], true, true);
        });
    }

    function loadStatusChart(statistics) {
        var StatusCode = statistics.statusCode;

        var StatusSeries = [];
        $.each(StatusCode, function(index, item) {

            var timeInSeconds = item.label/1000;
            for(var i = 10; i >= 1; i--){
                StatusSeries.push({
                    x : (timeInSeconds - (i*10))*1000,
                    y : 0
                });
            }
            StatusSeries.push({
                x : item.label,
                y : item.value
            });
        })
        var x = StatusCode.length;

        $("#statusChart").highcharts({
            chart : {
                type : 'spline',
                //animation : Highcharts.svg,
                marginRight : 10,
                events : {
                    load : function(){
                        //set up updating of the chart each second
                        var series = this.series[0];
                        setInterval(function (){
                            updateStatusSeries(series);
                        }, 10000);
                    }
                }         
            },
            title: {
                text: 'Live Data'
            },
            xAxis: {
                type: 'datetime'
            },
            yAxis: {
                title: {
                    text: 'Number of Counts'
                },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
            },
            tooltip: {
                formatter: function () {
                    return '<b>' + this.series.name + '</b><br/>' +
                        Highcharts.dateFormat('yyyy/mm/dd hh:mm:ss', this.x) + '<br/>' +
                        Highcharts.numberFormat(this.y, 2);
                }
            },
            legend: {
                enabled: false
            },
            exporting: {
                enabled: false
            },
            series: [{ data: StatusSeries }]
        });
    };

最佳答案

首先，由于这段代码，您在图表中得到了前导零:

for(var i = 10; i >= 1; i--){  // <----- 10
    StatusSeries.push({
        x : (timeInSeconds - (i*10))*1000,
        y : 0  // <----- zero values
    });
}

其次，您的图表没有前进，因为在这部分

events : {
    load : function(){
        //set up updating of the chart each second
        var series = this.series[0];
        setInterval(function (){
            updateStatusSeries(series); // <----- Not updating series
        }, 10000);
    }
}

updateStatusSeries(series) 实际上不会更新 series，因此图表不会获取新数据，只是停留在同一位置。

要解决这个问题，您可以选择

创建一个全局 chart 对象并使用它来访问其系列，如下所述:http://www.highcharts.com/docs/working-with-data/live-data
修改您的 updateStatusSeries() 以便它使用传递给它的回调，如下所示:http://www.in-example.com/?p=316

此外，日期格式(在 tooltip.formatter 中)应该像这样完成:

Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x)

关于javascript - Dynamic Highcharts 未更新，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30243691/

26

4

0

文章推荐： javascript - Ionic iOS8 表单域焦点导致页面滚动不正确

文章推荐： android - RecyclerView 不会立即显示任何内容

文章推荐： android - 如何为 Android 编译 PJSIP？

highcharts - angular2-highcharts Highcharts 导出模块
如何将导出模块包含到 angular2 应用程序中？我尝试将以下脚本添加到 index.html 但没有任何反应。最佳答案从 Angular CLI 1.0-RC.1 和最新的 angular
highcharts - 下载 highchart 时需要 Highchart 水印图像
我正在为 Web 应用程序使用 HighCharts Javascript 库。当我下载 Highchart 时，我需要 Highchart 水印图像。我正在使用普通的 hicgchart 代码。
highcharts - HighChart 工具提示位置可以更改吗？
我是 highcharts 的新手。默认情况下，Highchart 在图表本身内显示工具提示。这是否可以在图表外部显示工具提示，并显示在与内部显示相同的位置。有帮助吗？最佳答案您可以定义自己的 d
highcharts - Highcharts 热图是否可以在一行中使用日期时间轴？
我正在尝试使用日期时间格式的数据创建 highcharts 热图。数据以小时为单位，持续数天。我不希望图表每天都环绕，但希望所有数据都在一条线上。具体来说，它用于显示每小时的云量百分比，因此每个热图
highcharts - Highcharts 导出按钮不显示
我正在用 angular 中的简单图形来验证 highcharts。但是导出按钮不显示。我在 html 页面中添加脚本: 并在图表中添加属性: export :true, navigat
highcharts - highchart 图表重绘方法不刷新图表
我很想知道为什么按钮 2 在这个 example 中不起作用在这个 jsfiddle 示例中，附加到按钮 1 的“更新”方法正在运行，但在我的原始代码中，“更新”也不起作用。它显示错误:“对象# 没
highcharts - Highchart 工具提示的边框样式
我正在尝试在 highcharts 中编辑工具提示的边框。我遇到的问题是我只想显示底部边框。例如，您可以执行以下操作: tooltip: {borderWidth: 10}//但问题是在整个工具提
highcharts - Highcharts 十字线可以显示在面积图顶部吗？
Highcharts的十字线可以显示在面积图的顶部而不是隐藏在其下方吗？这是问题jsfiddle.net/hHjZb/1286/的示例最佳答案更新: Highcharts现在已经实现了the O
highcharts - Highcharts 在导出中添加图例
在将图表导出为PNG时，我试图在饼图上添加图例。这是我的代码: var chart_23_106; $(document).ready(function () { chart_23_106 = ne
highcharts - Highchart - 如何在半圆饼图中创建附加的图像仪表
带三角规的半圆饼如何在图表顶部创建带有三角形仪表的上述半圆饼图。我的车速表可以工作，但不能满足需要。在highchart api中有没有办法使用三角形作为仪表，而不是车速表？谢谢最佳答案这
highcharts - Highcharts -气泡图需要较大的气泡
我们使用的是Highchart气泡图，但是，当气泡x和y在图中位于同一位置且气泡y较小时，将无法看到或单击得很少的气泡。有什么方法可以先绘制较大的气泡，然后在顶部绘制较小的气泡？还是说较小的始终位于
highcharts - 设置图表宽度， Highcharts
是否可以使用百分比设置 Highcharts 的宽度？每当调整页面大小时，图表应具有足够的响应速度以适合页面大小吗？ One Solution 这里的问题是我有3个图表需要并排显示，每次调整页面大小时
highcharts - 更新基本柱 Highcharts
我在更新基本列 Highcharts 时遇到问题。我从服务器返回的 json 数组是: [{"name":"positive","data":[18,35,32,38]},{"name":"nega
highcharts - highchart 中的重叠列
有没有办法创建重叠的列？例如在 this jsFiddle ，蓝色和红色列应如下所示相互重叠，蓝色在后面，红色在前面。澄清一下，我不想要堆叠的列，蓝色和红色列都应该从 xAxis (y=0) 开始
highcharts - Highcharts 自定义图例
如何自定义图例从对此最佳答案查看 Highcharts legend api 选项。您可以使用所需的 css 进一步自定义。使用适当的 svg 图像(背景颜色取自图表本身) legend: {
highcharts - Highchart 图案填充
我正在尝试使用模式作为列范围以允许条形图工作。图案出现但不使用预定义的图案，所以它只是纯蓝色。通常它使用已定义的条纹图案，并在散点图等上完美运行。这是一个片段，展示了我的意思: Highchar
highcharts - Highcharts 范围选择器可以使用非日期线性范围吗？
我正在使用 HighStock JS 库生成一个图表，该图表使用 xAxis 的线性序列(不是时间序列)。我仍然想使用范围选择器来缩放到我的线性系列中的预定范围。这可能吗？例如；说我的 xAxis
highcharts - 单系列向下钻取到多系列 Highcharts
我需要从一个系列向下钻取到多个系列。但是下钻 id 在一个系列上似乎是唯一的，这意味着我无法从单个系列下钻到多个系列；只有一个。我该如何解决这个问题？最佳答案可以使用 chart.addSingl
highcharts - Highcharts 列标签
我制作了一个带有分组和堆叠列的Highcharts图表，就像在这里的示例http://www.highcharts.com/demo/column-stacked-and-grouped一样。该示例显
highcharts - Highchart 滚动条位置
如何在 highcharts/highstock 中将滚动条位置设置为Left？如图表加载时的图像所示，滚动条自动右对齐。有没有办法将它定位到左侧？最佳答案我们可以通过将 min 设置为 0

首页

博学

6Ren·AI

商城

javascript - Dynamic Highcharts 未更新