当前位置: 首页 > 知识库问答 >
问题:

来自Api的Highcharts动态数据

杜彦君
2023-03-14

我想创建一个从Api读取数据的图表。要做到这一点,我有这把小提琴http://jsfiddle.net/68oe1oLf/69/

注意:https://jsfiddle.net/68oe1oLf/69/将导致混合内容错误,并且无法从api加载数据

这是javascript代码

$(document).ready(function () {
$.get( "http://firmbridgecapital.com/live.php", function( dt ) {
     localStorage.setItem("data", dt);
     });

window.setInterval(function(){
  $.get( "http://firmbridgecapital.com/live.php", function( dt ) {
     localStorage.setItem("data", dt);
     });
}, 5000);

    Highcharts.setOptions({
        global: {
            useUTC: false
        }
    });

    Highcharts.chart('container', {
        chart: {
            type: 'spline',
            animation: Highcharts.svg, // don't animate in old IE
            marginRight: 10,
            events: {
                load: function () {

                    // set up the updating of the chart each second
                    var series = this.series[0];
                    setInterval(function () {
                        var x = (new Date()).getTime(), // current time
                            y = parseInt(localStorage.getItem("data"));
                        series.addPoint([x, y], true, true);
                    }, 5000);
                }
            }
        },
        title: {
            text: 'Live random data'
        },
        xAxis: {
            type: 'datetime',
            tickPixelInterval: 150
        },
        yAxis: {
          max: 3,
            title: {
                text: 'Value'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.series.name + '</b><br/>' +
                    Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                    Highcharts.numberFormat(this.y, 2);
            }
        },
        legend: {
            enabled: false
        },
        exporting: {
            enabled: false
        },
        series: [{
            name: 'Random data',
            data: (function () {
                // generate an array of random data
                var data = [],
                    time = (new Date()).getTime(),
                    i;

                for (i = -150; i <= 0; i += 25) {
                    data.push({
                        x: time,
                        y: parseInt(localStorage.getItem("data"))
                    });
                }
                return data;
            }())
        }]
    });
});

我从这个文档示例中借用了这个想法http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/dynamic-update/

我的图表始终以值1为基础,不显示y轴上不断变化的值。我该怎么解决这个问题?。

共有1个答案

白智
2023-03-14

您正在引用的值,即live php页面,似乎是1. x并且增长非常缓慢。(我正在寻找1.7)。

在您的解析中,您可以执行以下操作:

y = parseInt(localStorage.getItem("data"));

由于该值为1.7,并且您尝试使用parseInt将其解析为整数,因此它会转换为1。使用parseFloat将得到一个缓慢递增的图。

 类似资料:
  • 本章节我们将为大家介绍 Highcharts 的动态图。 我们在前面的章节已经了解了 Highcharts 配置语法。接下来让我们来看下 Highcharts 的其他配置。 每秒更新曲线图 chart.events chart.event 属性中添加 load 方法(图表加载事件)。在 1000 毫秒内随机产生数据点并生成图表。 chart: { events: { load:

  • 本文向大家介绍通过php动态传数据到highcharts,包括了通过php动态传数据到highcharts的使用技巧和注意事项,需要的朋友参考一下 1:在平时工作中,在对数据进行展示的时候,是直接通过后台提供的接口来获取json串,用来展示。今天别人问怎么在本地演示一下请求的动态数据。 2:在本地搭建环境,我用的WampServer,下载地址:http://xiazai.jb51.net/2017

  • 本文向大家介绍动态更新highcharts数据的实现方法,包括了动态更新highcharts数据的实现方法的使用技巧和注意事项,需要的朋友参考一下 动态更新highcharts数据的实现方法 以上这篇动态更新highcharts数据的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持呐喊教程。

  • 动态图表用于绘制基于数据的图表,其中数据可以在图表呈现后发生变化。在本节中,我们将讨论不同类型的动态图表。 图表类型 描述 每秒更新一次的折线图 每秒更新一次的折线图 添加点功能的图表 添加点功能的图表

  • 以下是我所拥有的: > sql表/csv文件,具有“tile xyz”坐标(web mercator tile坐标)和“data/color” 我想要的是: PNG瓷砖 基础数据不应访问 借助传单/Google maps API将png瓷砖显示为网页地图 问题/疑问: 数据太多,无法在此之前生成全球所有瓷砖(需要几天时间) 因此,我考虑了一个动态缓存/平铺创建算法(也许以前创建ZoomLevel0

  • 问题内容: 我尝试使用JSON中的数据在AngularJS中创建动态表单。我有这个工作: HTML JS 这段代码有效,但是问题是 我不知道如何添加动态复选框或清单 以及如何在表单内部进行 验证 ,如下所示: .controller(’DynamicFormCtrl’,function($ scope){ 预先感谢您的关注。最好的祝福! 问题答案: 我已经解决了我的问题。 这是一个带有Angula