我正在尝试使用Google Graphs创建一些GAUGE图表.我的目标是从php页面加载数据并进行自动刷新.我能够做到这一点,但是当刷新数据时,Gauge线不是动画的,而是从new重绘它们.我希望看到像这样的酷动画:https://jsfiddle.net/api/post/library/pure/.实际上我是从静态文件加载数据,然后我将从MySQL数据库创建数据(测试和工作).这是我的代码:
temperature.php
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script type="text/javascript">
google.charts.load('current', {'packages':['gauge']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = $.ajax({
url: "http://URL/fetch_data3.php?type=gauge",
dataType:"json",
async: false
}).responseText;
var data = new google.visualization.DataTable(jsonData);
var options = {
width: 600, height: 300,
redFrom: 35, redTo: 50,
yellowFrom: 24, yellowTo: 35,
greenFrom: 18, greenTo: 24,
majorTicks : ['-10', '0', '10','20','30','40','50'], minorTicks: 10,
animation:{
duration: 1000,
easing: 'inAndOut',
},
max: 50, min: -10
};
var chart = …我无法使用 interpolateNull 选项创建图形。应该是正确的，但不能在缺失点之间画线。数据是从 php-json 收集的。这里是示例和 json 提供的数据。html-javascript 页面：
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['line', 'corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
$.ajax({
url: 'http://192.168.1.50/fetch_data.php?type=line2',
dataType: 'json',
success: function (jsonData) {
var chartDiv = document.getElementById('chart_div');
var data = new google.visualization.DataTable(jsonData);
// create formatter
var formatNumber = new google.visualization.NumberFormat({pattern: '#,##0.00'});
// format column 1 - Pressure
formatNumber.format(data, 1);
// format column 2 - Temperature
formatNumber.format(data, 2);
var materialOptions = {
chart: {
title: 'Average Pressure and Temperatures'
},
vAxis: …根据不同的教程,我使用Core-Plot成功创建了一个散点图.现在,在X轴上设置日期我得到了完全错误的日期.我的图形源是一个包含字典的数组.在字典的每个记录中,字典的第一个键是unix时间戳,第二个键是绘制的值.它看起来像这样:
(
{
0 = 1334152500;
1 = 0;
},
{
0 = 1334152800;
1 = 0;
},
{
0 = 1334153100;
1 = 0;
},
AFAIK Core-Plot需要一个开始日期和一个步骤.在这种情况下,开始日期是1334152500(2012年4月11日星期三,格林尼治标准时间13:55:00),步骤是300秒.每隔300秒就会出现一个新值.现在我用来绘制X轴的代码:
// this string contains the first UNIX Timestamp registered
NSString *tstamp_start = [NSString stringWithFormat:@"%@", [[[self.graphData objectForKey:@"1"] objectAtIndex:0] objectForKey:@"0"]];
NSDate *refDate = [NSDate dateWithTimeIntervalSince1970:[tstamp_start doubleValue]];
// definition of the graph skipped...
CPTXYAxisSet *axisSet = (CPTXYAxisSet *)self.graph.axisSet;
// tInterval is previous set to 300 - float.
// here I should set the Interval between …