我在这里问，因为我在互联网上找不到任何东西。
假设我有一个时间序列，其中包含从2003年到今天的每日价格，例如在csv文件中。
现在我想绘制2016年的折线图，2015年的另一个折线以及2011/15的范围。
我可能首先需要创建有条理的数据框，其中数据日/月将与列对齐。
function foo() {
console.log('----- foo -----')
console.log('this: ' + this);
console.log('window: ' + window);
console.log('alert: ' + alert)
console.log('window.alert: ' + window.alert)
console.log('this.alert: ' + this.alert)
}
function bar() {
'use strict'
console.log('----- bar -----')
console.log('this: ' + this); // this is undefined
console.log('window: ' + window);
console.log('alert: ' + alert) // how is alert defined when this is undefined?
console.log('window.alert: ' + window.alert)
console.log('this.alert: ' + this.alert)
console.log('----- end -----')
}
foo();
bar();是否有工厂要这样做？也许"----- foo -----"
"this: [object Window]"
"window: [object Window]"
"alert: function alert() {
[native code]
}"
"window.alert: function alert() {
[native code]
}"
"this.alert: function alert() {
[native code]
}"
"----- bar -----"
"this: undefined"
"window: [object Window]"
"alert: function alert() {
[native code]
}"
"window.alert: function alert() {
[native code]
}"
TypeError: this is undefined
有一些这样的工具？ （我将把它用于我的图表。）
答案 0 :(得分：2)
您可以使用D3.js中编写的代码：
var charts = {};
charts.linechart = function (options) {
var __ = options || {};
__.CHART_NAME = __.CHART_NAME || 'linechart';
__.CONTAINER = __.CONTAINER || 'canvas-svg';
__.WIDTH = __.WIDTH || 800;
__.HEIGHT = __.HEIGHT || 800;
__.MERGIN = __.MERGIN || {top: 20, right: 20, bottom: 30, left: 50}
__.Y_AXIS_LABEL = __.Y_AXIS_LABEL || "Price ($)";
__.X_DATA_PARSE = __.X_DATA_PARSE || d3.time.format("%d-%b-%y").parse;
__.Y_DATA_PARSE = __.Y_DATA_PARSE || parseInt;
__.Y_DATA_FORMAT = __.Y_DATA_FORMAT || d3.time.format("%b-%y");
__.X_AXIS_COLUMN = __.X_AXIS_COLUMN || "date";
__.Y_AXIS_COLUMN = __.Y_AXIS_COLUMN || "close";
var margin = __.MERGIN,
width = __.WIDTH - margin.left - margin.right,
height = __.HEIGHT - margin.top - margin.bottom;
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(__.Y_DATA_FORMAT);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.line()
.interpolate("basis")
.x(function (d) {
return x(d.x_axis);
})
.y(function (d) {
return y(d.y_axis);
});
this.render = function (data) {
var svg = d3.select('#' + __.CONTAINER).append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.attr('class', __.CHART_NAME)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
data.forEach(function (d) {
d.x_axis = __.X_DATA_PARSE(d[__.X_AXIS_COLUMN]);
d.y_axis = __.Y_DATA_PARSE(d[__.Y_AXIS_COLUMN]);
});
x.domain(d3.extent(data, function (d) {
return d.x_axis;
}));
y.domain(d3.extent(data, function (d) {
return d.y_axis;
}));
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text(__.Y_AXIS_LABEL);
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
}
};.bar {
fill: #4682b4;
}
.chart-title {
font-size: 18px;
font-weight: bold;
}
.line {
fill: none;
stroke: #4682b4;
stroke-width: 1.5px;
}
.axis text {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div>
<div id="canvas-svg"></div>
</div>
<script>
window.onload = function () {
(function () {
var data = [
{
"date": "1-May-12",
"close": 582.13
},
{
"date": "30-Apr-12",
"close": 583.98
},
{
"date": "27-Apr-12",
"close": 603.00
},
{
"date": "26-Apr-12",
"close": 607.70
},
{
"date": "25-Apr-12",
"close": 610.00
},
{
"date": "24-Apr-12",
"close": 560.28
},
{
"date": "23-Apr-12",
"close": 571.70
},
{
"date": "20-Apr-12",
"close": 572.98
},
{
"date": "19-Apr-12",
"close": 587.44
},
{
"date": "18-Apr-12",
"close": 608.34
},
{
"date": "17-Apr-12",
"close": 609.70
},
{
"date": "16-Apr-12",
"close": 580.13
},
{
"date": "13-Apr-12",
"close": 605.23
},
{
"date": "12-Apr-12",
"close": 622.77
},
{
"date": "11-Apr-12",
"close": 626.20
},
{
"date": "10-Apr-12",
"close": 628.44
},
{
"date": "9-Apr-12",
"close": 636.23
},
{
"date": "5-Apr-12",
"close": 633.68
},
{
"date": "4-Apr-12",
"close": 624.31
},
{
"date": "3-Apr-12",
"close": 629.32
},
{
"date": "2-Apr-12",
"close": 618.63
},
{
"date": "30-Mar-12",
"close": 599.55
},
{
"date": "29-Mar-12",
"close": 609.86
},
{
"date": "28-Mar-12",
"close": 617.62
},
{
"date": "27-Mar-12",
"close": 614.48
},
{
"date": "26-Mar-12",
"close": 606.98
},
{
"date": "23-Mar-12",
"close": 596.05
},
{
"date": "22-Mar-12",
"close": 599.34
},
{
"date": "21-Mar-12",
"close": 602.50
},
{
"date": "20-Mar-12",
"close": 605.96
},
{
"date": "19-Mar-12",
"close": 601.10
},
{
"date": "16-Mar-12",
"close": 585.57
},
{
"date": "15-Mar-12",
"close": 585.56
},
{
"date": "14-Mar-12",
"close": 589.58
},
{
"date": "13-Mar-12",
"close": 568.10
},
{
"date": "12-Mar-12",
"close": 552.00
},
{
"date": "9-Mar-12",
"close": 545.17
},
{
"date": "8-Mar-12",
"close": 541.99
},
{
"date": "7-Mar-12",
"close": 530.69
},
{
"date": "6-Mar-12",
"close": 530.26
},
{
"date": "5-Mar-12",
"close": 533.16
},
{
"date": "2-Mar-12",
"close": 545.18
},
{
"date": "1-Mar-12",
"close": 544.47
},
{
"date": "29-Feb-12",
"close": 542.44
},
{
"date": "28-Feb-12",
"close": 535.41
},
{
"date": "27-Feb-12",
"close": 525.76
},
{
"date": "24-Feb-12",
"close": 522.41
},
{
"date": "23-Feb-12",
"close": 516.39
},
{
"date": "22-Feb-12",
"close": 513.04
},
{
"date": "21-Feb-12",
"close": 514.85
},
{
"date": "17-Feb-12",
"close": 502.12
},
{
"date": "16-Feb-12",
"close": 502.21
},
{
"date": "15-Feb-12",
"close": 497.67
},
{
"date": "14-Feb-12",
"close": 509.46
},
{
"date": "13-Feb-12",
"close": 502.60
},
{
"date": "10-Feb-12",
"close": 493.42
},
{
"date": "9-Feb-12",
"close": 493.17
},
{
"date": "8-Feb-12",
"close": 476.68
},
{
"date": "7-Feb-12",
"close": 468.83
},
{
"date": "6-Feb-12",
"close": 463.97
},
{
"date": "3-Feb-12",
"close": 459.68
},
{
"date": "2-Feb-12",
"close": 455.12
},
{
"date": "1-Feb-12",
"close": 456.19
},
{
"date": "31-Jan-12",
"close": 456.48
},
{
"date": "30-Jan-12",
"close": 453.01
},
{
"date": "27-Jan-12",
"close": 447.28
},
{
"date": "26-Jan-12",
"close": 444.63
},
{
"date": "25-Jan-12",
"close": 446.66
},
{
"date": "24-Jan-12",
"close": 420.41
},
{
"date": "23-Jan-12",
"close": 427.41
},
{
"date": "20-Jan-12",
"close": 420.30
},
{
"date": "19-Jan-12",
"close": 427.75
},
{
"date": "18-Jan-12",
"close": 429.11
},
{
"date": "17-Jan-12",
"close": 424.70
},
{
"date": "13-Jan-12",
"close": 419.81
},
{
"date": "12-Jan-12",
"close": 421.39
},
{
"date": "11-Jan-12",
"close": 422.55
},
{
"date": "10-Jan-12",
"close": 423.24
},
{
"date": "9-Jan-12",
"close": 421.73
},
{
"date": "6-Jan-12",
"close": 422.40
},
{
"date": "5-Jan-12",
"close": 418.03
},
{
"date": "4-Jan-12",
"close": 413.44
},
{
"date": "3-Jan-12",
"close": 411.23
}
];
var options = {};
var linechart = new charts.linechart(options);
linechart.render(data);
})();
};
</script>