- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我试图从我的图表的数据集中解析时间戳。它说
当我试图解析我的数据集时出现“未捕获的类型错误:t.slice 不是一个函数”。
这是我试过的方法,
var jsonDataLoadAvg;
var jsonDataFlightRequest;
var jsonDataMemoryAvg;
var DURATION = 100;
//onclick function which will trigger the option for 30mints,1 hour etc
function DurationOnClick(element) {
var buttonId = element.id;
var buttonName = $(element).attr("name");
var chartType = $('#chartType').val();
var idValue = $('#IdValue').val();
//here the spinner will indicate untill the data loads to the map
if ('InFlight' != buttonName) {
if ('LoadAverage' == buttonName) {
$('#container2').empty();
$('#container2').html('<i class="fa fa-spinner fa-pulse fa-4x"></i>');
} else {
$('#container1').empty();
$('#container1').html('<i class="fa fa-spinner fa-pulse fa-4x"></i>');
}
} else {
$('#container3').empty();
$('#container3').html('<i class="fa fa-spinner fa-pulse fa-4x"></i>');
}
//after user click the option here we are changing the option black to red.
$(element).button('toggle');
restCaller(buttonName, idValue, chartType, buttonId);
}
//ajax call to the UI back end get the data to the charts
function restCaller(buttonName, idValue, chartType, buttonId) {
var html1 = '<svg id="lineChartSVGchart1" class="lineChart--svg"> <defs> ' +
'<linearGradient id="lineChart--gradientBackgroundArea" x1="0" x2="0" y1="0" y2="1">' +
' <stop class="lineChart--gradientBackgroundArea--top" offset="0%" /> <stop class="lineChart--gradientBackgroundArea--bottom" offset="100%" /> ' +
'</linearGradient> </defs> </svg>';
var html2 = '<svg id="lineChartSVGchart2" class="lineChart--svg"> <defs>' +
' <linearGradient id="lineChart--gradientBackgroundArea" x1="0" x2="0" y1="0" y2="1">' +
' <stop class="lineChart--gradientBackgroundArea--top" offset="0%" /> <stop class="lineChart--gradientBackgroundArea--bottom" offset="100%" />' +
' </linearGradient> </defs> </svg>';
var html3 = '<svg id="lineChartSVGchart3" class="lineChart--svg"> <defs>' +
' <linearGradient id="lineChart--gradientBackgroundArea" x1="0" x2="0" y1="0" y2="1"> ' +
'<stop class="lineChart--gradientBackgroundArea--top" offset="0%" /> <stop class="lineChart--gradientBackgroundArea--bottom" offset="100%" />' +
' </linearGradient> </defs> </svg>';
$.ajax({
type: "GET",
url: caramel.context + "/controllers/healthStatistics/healthStatistics_getrequest.jag",
dataType: 'json',
data: {"formtype": buttonName, "idValue": idValue, "chartType": chartType, "duration": buttonId},
success: function (data) {
if ('error' != data.status) {
if ('InFlight' == buttonName) {
$('#lineChartSVGchart3').empty();
$('#container3').empty();
$('#container3').append(html3);
jsonDataFlightRequest = data;
generalChart('chart3', jsonDataFlightRequest, buttonName);
}
else if ('LoadAverage' == buttonName) {
$('#lineChartSVGchart2').empty();
$('#container2').empty();
$('#container2').append(html2);
jsonDataLoadAvg = data;
generalChart('chart2', jsonDataLoadAvg, buttonName);
}
else {
$('#lineChartSVGchart1').empty();
$('#container1').empty();
$('#container1').append(html1);
jsonDataMemoryAvg = data;
generalChart('chart1', jsonDataMemoryAvg, buttonName);
}
} else {
//print error message in any case.
var n = noty({text: data.message, layout: 'bottomRight', type: 'error'});
}
}
}).always(function () {
});
}
//body onload function will trigger when the page loads
function bodyOnLoad() {
var buttonNames;
var chartType = $('#chartType').val();
if ("Cluster" != chartType) {
buttonNames = ["LoadAverage", "MemoryConsumption"];
} else {
buttonNames = ["InFlight", "LoadAverage", "MemoryConsumption"];
}
buttonNames.forEach(function (entry) {
initialLoad(entry, chartType);
});
}
//initialy acalling to the REST API and get data for the chart
function initialLoad(buttonName, chartType) {
var idValue = $('#IdValue').val();
var buttonId = "1Hour";
restCaller(buttonName, idValue, chartType, buttonId);
}
function generalChart(chart, dataset, buttonName) {
var elementId = chart;
var dataChart;
var drawchart;
if ('InFlight' != buttonName) {
if ('LoadAverage' == buttonName) {
dataChart = "data.memberAverageLoadAverage";
drawchart = "d.memberAverageLoadAverage";
} else {
dataChart = "data.memberAverageMemoryConsumption";
drawchart = "d.memberAverageMemoryConsumption";
}
} else {
dataChart = "data.inFlightRequestCount";
drawchart = "d.inFlightRequestCount";
}
function drawLineChart(elementId, data) {
// data manipulation first
data.forEach(function (data) {
data.timeStamp = new Date(data.timeStamp);
});
// TODO code duplication check how you can avoid that
var containerEl = document.getElementById(elementId),
width = containerEl.clientWidth,
height = width * 0.4,
margin = {
top: 30,
right: 10,
left: 10
},
detailWidth = 98,
detailHeight = 55,
detailMargin = 10,
container = d3.select(containerEl),
svg = container.select('svg')
.attr('width', width)
.attr('height', height + margin.top),
x = d3.time.scale().range([0, width - detailWidth]),
xAxis = d3.svg.axis().scale(x)
.ticks(8)
.tickSize(-height),
xAxisTicks = d3.svg.axis().scale(x)
.ticks(16)
.tickSize(-height)
.tickFormat(''),
y = d3.scale.linear().range([height, 0]),
yAxisTicks = d3.svg.axis().scale(y)
.ticks(12)
.tickSize(width)
.tickFormat('')
.orient('right'),
area = d3.svg.area()
.interpolate('linear')
.x(function (d) {
return x(d.timeStamp) + detailWidth / 2;
})
.y0(height)
.y1(function (d) {
return y(eval(drawchart));
}),
line = d3.svg.line()
.interpolate('linear')
.x(function (d) {
return x(d.timeStamp) + detailWidth / 2;
})
.y(function (d) {
return y(eval(drawchart));
}),
startData = data.map(function (datum) {
return {
timeStamp: datum.timeStamp,
value: 0
};
}),
circleContainer;
// Compute the minimum and maximum date, and the maximum price.
x.domain([data[0].timeStamp, data[data.length - 1].timeStamp]);
// hacky hacky hacky :(
y.domain([0, d3.max(data, function (d) {
return eval(drawchart);
}) + 100]);
svg.append('g')
.attr('class', 'lineChart--xAxisTicks')
.attr('transform', 'translate(' + detailWidth / 2 + ',' + height + ')')
.call(xAxisTicks);
svg.append('g')
.attr('class', 'lineChart--xAxis')
.attr('transform', 'translate(' + detailWidth / 2 + ',' + ( height + 7 ) + ')')
.call(xAxis);
svg.append('g')
.attr('class', 'lineChart--yAxisTicks')
.call(yAxisTicks);
// Add the line path.
svg.append('path')
.datum(startData)
.attr('class', 'lineChart--areaLine')
.attr('d', line)
.transition()
.duration(DURATION)
.delay(DURATION / 2)
.attrTween('d', tween(data, line))
.each('end', function () {
drawCircles(data);
});
// Add the area path.
svg.append('path')
.datum(startData)
.attr('class', 'lineChart--area')
.attr('d', area)
.transition()
.duration(DURATION)
.attrTween('d', tween(data, area));
// Helper functions!!!
function drawCircle(datum, index) {
circleContainer.datum(datum)
.append('circle')
.attr('class', 'lineChart--circle')
.attr('r', 0)
.attr(
'cx',
function (d) {
return x(d.timeStamp) + detailWidth / 2;
}
)
.attr(
'cy',
function (d) {
return y(eval(drawchart));
}
)
.on('mouseenter', function (d) {
d3.select(this)
.attr(
'class',
'lineChart--circle lineChart--circle__highlighted'
)
.attr('r', 2.5);
d.active = true;
showCircleDetail(d);
})
.on('mouseout', function (d) {
d3.select(this)
.attr(
'class',
'lineChart--circle'
)
.attr('r', 2.5);
if (d.active) {
hideCircleDetails();
d.active = false;
}
})
.on('click touch', function (d) {
if (d.active) {
showCircleDetail(d)
} else {
hideCircleDetails();
}
})
.transition()
.delay(DURATION / 10 * index)
.attr('r', 2.5);
}
function drawCircles(data) {
circleContainer = svg.append('g');
data.forEach(function (datum, index) {
drawCircle(datum, index);
});
}
function hideCircleDetails() {
circleContainer.selectAll('.lineChart--bubble')
.remove();
}
function showCircleDetail(data) {
var details = circleContainer.append('g')
.attr('class', 'lineChart--bubble')
.attr(
'transform',
function () {
var result = 'translate(';
result += x(data.timeStamp);
result += ', ';
result += y(eval(dataChart)) - detailHeight - detailMargin;
result += ')';
return result;
}
);
details.append('path')
.attr('d', 'm-36.6941,-1c-3.0292,0 -5.4848,1.3422 -5.4848,2.999l0,44.6691c0,1.6562 2.4526,2.999 5.4865,2.999l75.71,0c8.3518,3.7228 0.1055,-0.0614 8.3934,3.8017c8.0794,-3.7725 0.0085,-0.0325 8.2307,-3.8017l75.8633,0c3.03499,0 5.495,-1.3422 5.495,-2.999l0,-44.6691c0,-1.6563 -2.465,-2.999 -5.485,-2.999l-168.209,0l0,0l0,0l0,0l0,0l-0.0001,0zm0,0')
.attr('width', detailWidth)
.attr('height', detailHeight);
var text = details.append('text')
.attr('class', 'lineChart--bubble--text');
var date = new Date(data.timeStamp);
var text = details.append('text')
.attr('class', 'lineChart--bubble--text');
text.append('tspan')
.attr('class', 'lineChart--bubble--label')
.attr('x', detailWidth / 2)
.attr('y', detailHeight / 3)
.attr('text-anchor', 'middle')
.text(timeConverter(date));
text.append('tspan')
.attr('class', 'lineChart--bubble--value')
.attr('x', detailWidth / 2)
.attr('y', detailHeight / 4 * 3)
.attr('text-anchor', 'middle')
.text(eval(dataChart));
}
}
var data = dataset;
drawLineChart(elementId, data);
}
//time converter funtion returns the time in human readble manner
function timeConverter(timestamp) {
var string = String(timestamp);
var numb = string.indexOf("(");
var timeUTC = string.substring(0, numb);
return timeUTC;
}
function tween(b, callback) {
return function (a) {
var i = d3.interpolateArray(a, b);
return function (t) {
return callback(i(t));
};
};
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.10/d3.min.js"></script>
<div class="row title">
<div class="title-main text-center">
<h1 id="mainTitle" style="margin-bottom: 0px; margin-top: 60px">{{type}} Statistics</h1>
<h3> {{id}}</h3>
<input type="hidden" value={{type}} id='chartType'>
<input type="hidden" value={{id}} id='IdValue'>
</div>
</div>
<div class="container-fluid content" style="padding-bottom:40px">
</br>
<a class="btn btn-default" href="{{url "/applications/"}}{{alias}}/" role="button" style="margin-bottom: 24px;">Back</a>
<div class="row">
<!-- Memory Consumption chart panel-->
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title" style="color:Black">Memory Consumption Average</h3>
</div>
<div class="panel-body btn-group" >
<button class="btn btn-default btn-xs btn-info" name="MemoryConsumption" id="30Min" onclick="return DurationOnClick(this)">30 mins</button>
<button class="btn btn-default btn-xs btn-info" autofocus="true" name="MemoryConsumption" id="1Hour" onclick="return DurationOnClick(this)">1 hour</button>
<button class="btn btn-default btn-xs btn-info" name="MemoryConsumption" id="1Day" onclick="return DurationOnClick(this)">1 day</button>
<button class="btn btn-default btn-xs btn-info" name="MemoryConsumption" id="1Week" onclick="return DurationOnClick(this)">1 week</button>a
<button class="btn btn-default btn-xs btn-info" name="MemoryConsumption" id="1Month" onclick="return DurationOnClick(this)">1 month</button>
<div class="container content" style="width: 600px;">
<div class="row text-center" id="chart1">
<div id="container1">
<svg id="lineChartSVGchart1" class="lineChart--svg">
<defs>
<linearGradient id="lineChart--gradientBackgroundArea" x1="0" x2="0" y1="0" y2="1">
<stop class="lineChart--gradientBackgroundArea--top" offset="0%" />
<stop class="lineChart--gradientBackgroundArea--bottom" offset="100%" />
</linearGradient>
</defs>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Load Average chart panel-->
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title" style="color:Black">Load Average</h3>
</div>
<div class="panel-body btn-group">
<button class="btn btn-default btn-xs btn-info" name="LoadAverage" id="30Min" onclick="return DurationOnClick(this)">30 mins</button>
<button class="btn btn-default btn-xs btn-info" autofocus="true" name="LoadAverage" id="1Hour" onclick="return DurationOnClick(this)">1 hour</button>
<button class="btn btn-default btn-xs btn-info" name="LoadAverage" id="1Day" onclick="return DurationOnClick(this)">1 day</button>
<button class="btn btn-default btn-xs btn-info" name="LoadAverage" id="1Week" onclick="return DurationOnClick(this)">1 week</button>
<button class="btn btn-default btn-xs btn-info" name="LoadAverage" id="1Month" onclick="return DurationOnClick(this)">1 month</button>
<div class="container content" style="width: 600px;">
<div class="row text-center" id="chart2">
<div id="container2">
<svg id="lineChartSVGchart2" class="lineChart--svg">
<defs>
<linearGradient id="lineChart--gradientBackgroundArea" x1="0" x2="0" y1="0" y2="1">
<stop class="lineChart--gradientBackgroundArea--top" offset="0%" />
<stop class="lineChart--gradientBackgroundArea--bottom" offset="100%" />
</linearGradient>
</defs>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{{#if condition}}
<!-- In Flight Request Count chart panel-->
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title" style="color:Black">In Flight Request Count</h3>
</div>
<div class="panel-body btn-group">
<button class="btn btn-default btn-xs btn-info" name="InFlight" id="30Min" onclick="return DurationOnClick(this)">30 mins</button>
<button class="btn btn-default btn-xs btn-info" autofocus="true" name="InFlight" id="1Hour" onclick="return DurationOnClick(this)">1 hour</button>
<button class="btn btn-default btn-xs btn-info" name="InFlight" id="1Day" onclick="return DurationOnClick(this)">1 day</button>
<button class="btn btn-default btn-xs btn-info" name="InFlight" id="1Week" onclick="return DurationOnClick(this)">1 week</button>
<button class="btn btn-default btn-xs btn-info" name="InFlight" id="1Month" onclick="return DurationOnClick(this)">1 month</button>
<div class="container content" style="width: 600px;">
<div class="row text-center" id="chart3">
<div id="container3">
<svg id="lineChartSVGchart3" class="lineChart--svg">
<defs>
<linearGradient id="lineChart--gradientBackgroundArea" x1="0" x2="0" y1="0" y2="1">
<stop class="lineChart--gradientBackgroundArea--top" offset="0%" />
<stop class="lineChart--gradientBackgroundArea--bottom" offset="100%" />
</linearGradient>
</defs>
</svg>
</div>
</div>
</div>
</div>
</div>
{{/if}}
<!-- will trigger on load and pass the default data to the charts-->
<body onload="bodyOnLoad()">
</body>
这是我试图解析的数据集,
var data = [{"clusterId":"cartridge-group-app.my-tomcat.tomcat.domain","timeStamp":1437417228979,"inFlightRequestCount":22.0},{"clusterId":"cartridge-group-app.my-tomcat.tomcat.domain","timeStamp":1437417288983,"inFlightRequestCount":32.5},{"clusterId":"cartridge-group-app.my-tomcat.tomcat.domain","timeStamp":1437417348980,"inFlightRequestCount":42.5},{"clusterId":"cartridge-group-app.my-tomcat.tomcat.domain","timeStamp":1437417408983,"inFlightRequestCount":52.5},{"clusterId":"cartridge-group-app.my-tomcat.tomcat.domain","timeStamp":1437417468981,"inFlightRequestCount":62.0},{"clusterId":"cartridge-group-app.my-tomcat.tomcat.domain","timeStamp":1437417528982,"inFlightRequestCount":66.66666666666667},{"clusterId":"cartridge-group-app.my-tomcat.tomcat.domain","timeStamp":1437417588983,"inFlightRequestCount":48.75},{"clusterId":"cartridge-group-app.my-tomcat.tomcat.domain","timeStamp":1437417648983,"inFlightRequestCount":41.25},{"clusterId":"cartridge-group-app.my-tomcat.tomcat.domain","timeStamp":1437417708980,"inFlightRequestCount":55.0},{"clusterId":"cartridge-group-app.my-tomcat.tomcat.domain","timeStamp":1437417768983,"inFlightRequestCount":90.0},{"clusterId":"cartridge-group-app.my-tomcat.tomcat.domain","timeStamp":1437417828981,"inFlightRequestCount":90.0}];
我不知道为什么会给出这样的输出。谁能帮我解决这个问题?
最佳答案
d3.time.format( '%Y-%m-%d' ).parse
需要注释格式的字符串并返回相应的 Date 对象。
编辑澄清
看来我误解了你的意思。
如果您想将时间戳从 1437417228979 格式化为可读的内容,例如“2015-07-20 20:33”,您可以使用
var format = d3.time.format( '%Y-%m-%d %H:%M' );
for (i = 0; i < data.length;i++) {
data[i].timeStamp = format (new Date(data[i].timeStamp));
}
https://jsfiddle.net/94ao83n7/1/
如果您想将时间戳解析为实际的 javascript Date 对象,您只需将时间戳放入 Date 对象的构造函数中即可
for (i = 0; i < data.length;i++) {
data[i].timeStamp = new Date(data[i].timeStamp);
}
关于javascript - 绘制图表时出现 d3js 错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31816637/
我的应用程序从一个有 5 个选项卡的选项卡栏 Controller 开始。一开始,第一个出现了它的名字,但其他四个没有名字,直到我点击它们。然后根据用户使用的语言显示名称。如何在选项卡栏出现之前设置选
我有嵌套数组 json 对象(第 1 层、第 2 层和第 3 层)。我的问题是数据表没有出现。任何相关的 CDN 均已导入。该表仅显示部分。我引用了很多网站,但都没有解决我的问题。 之前我使用标准表来
我正在尝试设置要显示的 Parse PFLoginViewController。这是我的一个 View Controller 的类。 import UIKit import Parse import
我遇到了这个问题,我绘制的对象没有出现在 GUI 中。我知道它正在被处理,因为数据被推送到日志文件。但是,图形没有出现。 这是我的一些代码: public static void main(Strin
我有一个树状图,其中包含出现这样的词...... TreeMap occurrence = new TreeMap (); 字符串 = 单词 整数 = 出现次数。 我如何获得最大出现次数 - 整数,
因此,我提示用户输入变量。如果变量小于 0 且大于 10。如果用户输入 10,我想要求用户再次输入数字。我问时间的时候输入4,它说你输入错误。但在第二次尝试时效果很好。例如:如果我输入 25,它会打印
我已经用 css overflow 属性做了一个例子。在这个例子中我遇到了一个溢出滚动的问题。滚动条出现了,但没有工作意味着每当将光标移动到滚动条时,在这个滚动条不活动的时间。我对此一无所知,所以请帮
我现在正在做一个元素。当您单击一个元素时,会出现以下信息,我想知道如何在您单击下一个元素而不重新单击同一元素时使其消失....例如,我的元素中有披萨,我想单击肉披萨看到浇头然后点击奶酪披萨看到浇头和肉
我有一个路由器模块,它将主题与正则表达式进行比较,并将出现的事件与一致的键掩码链接起来。 (它是一个简单的 url 路由过滤,如 symfony http://symfony.com/doc/curr
这个问题在这里已经有了答案: 9年前关闭。 Possible Duplicate: mysql_fetch_array() expects parameter 1 to be resource, bo
我在底部有一个带有工具栏的 View ,我正在使用 NavigationLink 导航到该 View 。但是当 View 出现时,工具栏显示得有点太低了。大约半秒钟后,它突然跳到位。它只会在应用程序启
我试图在我的应用程序上为背景音乐添加一个 AVAudioPlayer,我正在主屏幕上启动播放器,尝试在应用程序打开时开始播放但出现意外行为... 它播放并立即不断创建新玩家并播放这些玩家,因此同时播放
这是获取一个数字,获取其阶乘并将其加倍,但是由于基本情况,如果您输入 0,它会给出 2 作为答案,因此为了绕过它,我使用了 if 语句,但收到错误输入“if”时解析错误。如果你们能提供帮助,我真的很感
暂停期间抛出异常 android.os.DeadObjectException 在 android.os.BinderProxy.transactNative( native 方法) 在 androi
我已经为猜词游戏编写了一些代码。它从用户输入中读取字符并在单词中搜索该字符;根据字符是否在单词中,程序返回并控制一些变量。 代码如下: import java.util.Random; import
我是自动化领域的新手。这是我的简单 TestNG 登录代码,当我以 TestNG 身份运行该代码时,它会出现 java.lang.NullPointerException,双击它会突出显示我导航到 U
我是c#程序员,我习惯了c#的封装语法和其他东西。但是现在,由于某些原因,我应该用java写一些东西,我现在正在练习java一天!我要创建一个为我自己创建一个虚拟项目,以便让自己更熟悉 Java 的
我正在使用 Intellij,我的源类是 main.com.coding,我的资源文件是 main.com.testing。我将 spring.xml 文件放入资源文件中。 我的测试类位于 test.
我想要我的tests folder separate到我的应用程序代码。我的项目结构是这样的 myproject/ myproject/ myproject.py moduleon
这个问题已经有答案了: What is a NullPointerException, and how do I fix it? (12 个回答) 已关闭 6 年前。 因此,我尝试比较 2 个值,一个
我是一名优秀的程序员,十分优秀!