好的，所以我们有 3 个想法直到知道。
1.一个“MySQL”数据库
有 3 个表称为“Date1”、“ Date2 ”和“Date3” 有 2 个列，每个列都有数据：
_ __ _ __ _ __ _ _ _ __ _ __ _ _ _ __ _ __ _ __ _ __ _ __ _ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ ___ __|
| 表：数据1 | 表：数据2 | 表：数据3 |
__ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ _ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ _ _ _ __ _ __ _ _ _ _ ___|
| 日期 | 关闭 | 日期 | 关闭 | 日期 | 关闭 |
|__ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ _ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ _ _ _ __ _ __ _ _ __ _ __ _ |
| 2012 年 5 月 1 日 | 58.13 | 2012 年 5 月 1 日 | 58.13 | 2012 年 5 月 1 日 | 58.13 |
| 2012 年 4 月 30 日 | 53.98 | 2012 年 4 月 30 日 | 53.98 | 2012 年 4 月 30 日 | 53.98 |
| 2012 年 4 月 27 日 | 67.00 | 2012 年 4 月 27 日 | 67.00 | 2012 年 4 月 27 日 | 67.00 |
| _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ ___ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ |
2. 一个带有一些 JSON 数据的 php 文件/桥接器
__ _ __ _ __ _ __ _ __ _ _ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ _
| 表数据1 | - Data1.php - > | 数据转换为 JSON |
_ __ _ __ _ __ _ __ _ __ _ _ __ _ __ _ __ _ __ _ __ _ __ _ ___ _
_ __ _ __ _ __ _ __ _ __ _ _ __ _ __ _ __ _ __ _ __ _ _ _ __ _ _
| 表数据2 | - Data2.php - > | 数据转换为 JSON |
_ __ _ __ _ __ _ __ _ __ _ _ __ _ __ _ __ _ __ _ __ _ __ ___ _ _
_ __ _ __ _ __ _ __ _ __ _ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ _
| 表数据3 | - Data3.php - > | 数据转换为 JSON |
_ __ _ __ _ __ _ __ _ __ _ _ __ _ __ _ __ _ __ _ __ __ _ __ _ _
（此处为 PHP 完整来源）从我们的表中选择数据
$myquery = "SELECT `date`, `close` FROM `data1`";<br>
然后我们将$data变量声明为数组（$data = array();）并将查询返回的信息输入$data数组；
for ($x = 0; $x < mysql_num_rows($query); $x++) {
$data[] = mysql_fetch_assoc($query);
}
（这是一段花哨的小代码，它逐行获取信息并将其放入数组中）然后我们将（ ）以 json 格式（echo）的数组返回（ ）到运行脚本的任何内容中$dataecho json_encode($data);data2.php
所以现在当我们输入“data1.php”、“data2.php”或“data3.php”时，我们会得到这个：
“data1.php”
[{"date":"1-May-12","close":"58.13"},{"date":"30-Apr-12","close":"53.98"},
{"date":"27-Apr-12","close":"67.00"},{"date":"26-Apr-12","close":"89.70"},
“data2.php”
[{"date":"1-May-12","close":"58.13"},{"date":"30-Apr-12","close":"53.98"},
{"date":"27-Apr-12","close":"67.00"},{"date":"26-Apr-12","close":"89.70"},
“data3.php”
[{"date":"1-May-12","close":"58.13"},{"date":"30-Apr-12","close":"53.98"},
{"date":"27-Apr-12","close":"67.00"},{"date":"26-Apr-12","close":"89.70"},
3. 带有 3 个折线图的 D3.js 多图。
Multichart 演示，但这个 multichart 正在创建它自己的随机数据。使用此代码：
function testData() {
var data1 = [];
var data2 = [];
var data3 = [];
stream_layers(3,128,.1).map(function(layer, index) {
layer.forEach(function(item, i) {
var object = { x: item.x };
object['stream' + (index + 1)] = item.y;
eval('data' + (index + 1)).push(object);
});
});
var data = extend(data1, data2);
var result = extend(data, data3);
return result;
}
因此，我们在用户的“Xaranqe”建议下创建以下代码，将我们的“数据”插入到这个多图表中
function testData() {
var data1 = [];
var data2 = [];
var data3 = [];
d3.json("php/data1.php", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.close = +d.close;
data1.push(d.close);
});
d3.json("php/data2.php", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.close = +d.close;
data2.push(d.close);
});
d3.json("php/data3.php", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.close = +d.close;
data3.push(d.close);
});
// More similar functions here
});
var data = extend(data1, data2);
var result = extend(data, data3);
return result;
}
但是我们得到的结果是，一个空白页..所以我们缺少一些东西..嗯......
有什么新想法吗？
我给你留下了多图表代码的直接副本！感谢帮助！相信社区将从这些信息中受益匪浅！
<!DOCTYPE html>
<meta charset="utf-8">
<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
<style>
body {
overflow-y:scroll;
}
text {
font: 12px sans-serif;
}
svg {
display: block;
}
#chart1 svg {
height: 500px;
min-width: 100px;
min-height: 100px;
/*
margin: 50px;
Minimum height and width is a good idea to prevent negative SVG dimensions...
For example width should be =< margin.left + margin.right + 1,
of course 1 pixel for the entire chart would not be very useful, BUT should not have errors
*/
}
</style>
<body>
<div id="chart">
<svg style="height: 500px;"></svg>
</div>
<div id="stream1" style="float: left; margin-left: 15px;">
<div><h1>Stream #1</h1></div>
</div>
<div id="stream2" style="float: left; margin-left: 15px;">
<div><h1>Stream #2</h1></div>
</div>
<div id="stream3" style="float: left; margin-left: 15px;">
<div><h1>Stream #3</h1></div>
</div>
<script src="../lib/d3.v2.js"></script>
<script src="../lib/crossfilter.js"></script>
<script src="../nv.d3.js"></script>
<script src="../src/tooltip.js"></script>
<script src="../src/utils.js"></script>
<script src="../src/models/legend.js"></script>
<script src="../src/models/axis.js"></script>
<script src="../src/models/scatter.js"></script>
<script src="../src/models/line.js"></script>
<script src="../src/models/lineWithFocusChart.js"></script>
<script src="stream_layers.js"></script>
<script>
extend = function(destination, source) {
for (var property in source) {
if (property in destination) {
if ( typeof source[property] === "object" &&
typeof destination[property] === "object") {
destination[property] = extend(destination[property], source[property]);
} else {
continue;
}
} else {
destination[property] = source[property];
};
}
return destination;
};
var rawData = testCrossfilterData();
nv.addGraph(function() {
var chart = nv.models.lineWithFocusChart();
chart.xAxis
.tickFormat(d3.format(',f'));
chart.x2Axis
.tickFormat(d3.format(',f'));
chart.yAxis
.tickFormat(d3.format(',.2f'));
chart.y2Axis
.tickFormat(d3.format(',.2f'));
chart.dispatch.on('brush', click);
var data = normalizeData(rawData.datum,
[
{
name: 'Stream #1',
key: 'stream1'
},
{
name: 'Stream #2',
key: 'stream2'
},
{
name: 'Stream #3',
key: 'stream3'
}
]);
nv.log(data);
d3.select('#chart svg')
.datum(data)
.transition().duration(500)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
function click(e) {
extent = e.extent;
rawData.data.filter([extent[0], extent[1]]);
streams("stream1");
streams("stream2");
streams("stream3");
}
function streams(key) {
var topData = rawData.data.top(5);
var stream = d3.select("div#" + key).selectAll(".stream-data")
.data(topData, function(d) {
return d.key;
});
stream
.html(function(d) {
return d[key];
})
stream.enter().append("div")
.attr("class", "stream-data")
.html(function(d) {
return d[key];
})
stream.exit().remove();
stream.order();
}
function normalizeData(data, series) {
var sort = crossfilter.quicksort.by(function(d) { return d.key; });
var result = [];
for (var i = 0; i < series.length; i++) {
var seriesData = data.top(Infinity);
var sorted = sort(seriesData, 0, seriesData.length);
var values = [];
seriesData.forEach(function(item, index) {
values.push({x: item.key, y: item.value[series[i].key]});
});
result.push({key: series[i].name, values: values, color: series[i].color});
};
return result;
};
function testCrossfilterData() {
var data = crossfilter(testData());
try {
data.data = data.dimension(function(d) { return d.x; });
data.datum = data.data.group(function(d) { return d; });
data.datum.reduce(
function (p, v) {
p.count++;
p.stream1 += v.stream1;
p.stream2 += v.stream2;
p.stream3 += v.stream3;
return p;
},
function (p, v) {
p.count--;
p.stream1 -= v.stream1;
p.stream2 -= v.stream2;
p.stream3 -= v.stream3;
return p;
},
function () {
return {count: 0, stream1: 0, stream2: 0, stream3: 0};
});
data.stream1 = data.dimension(function(d) { return d.stream1; });
data.stream1datum = data.data.group(function(d) { return d; });
data.stream1datum.reduce(
function (p, v) {
p.count++;
p.stream1 += v.stream1;
p.stream2 += v.stream2;
p.stream3 += v.stream3;
return p;
},
function (p, v) {
p.count--;
p.stream1 -= v.stream1;
p.stream2 -= v.stream2;
p.stream3 -= v.stream3;
return p;
},
function () {
return {count: 0, stream1: 0, stream2: 0, stream3: 0};
}
);
data.stream2 = data.dimension(function(d) { return d.stream2; });
data.stream2datum = data.data.group(function(d) { return d; });
data.stream2datum.reduce(
function (p, v) {
p.count++;
p.stream1 += v.stream1;
p.stream2 += v.stream2;
p.stream3 += v.stream3;
return p;
},
function (p, v) {
p.count--;
p.stream1 -= v.stream1;
p.stream2 -= v.stream2;
p.stream3 -= v.stream3;
return p;
},
function () {
return {count: 0, stream1: 0, stream2: 0, stream3: 0};
}
);
data.stream3 = data.dimension(function(d) { return d.stream3; });
data.stream3datum = data.data.group(function(d) { return d; });
data.stream3datum.reduce(
function (p, v) {
p.count++;
p.stream1 += v.stream1;
p.stream2 += v.stream2;
p.stream3 += v.stream3;
return p; },
function (p, v) {
p.count--;
p.stream1 -= v.stream1;
p.stream2 -= v.stream2;
p.stream3 -= v.stream3;
return p;
},
function () {
return {count: 0, stream1: 0, stream2: 0, stream3: 0};
}
);
} catch (e) {
nv.log(e.stack);
}
return data;
}
function testData() {
var data1 = [];
var data2 = [];
var data3 = [];
d3.json("php/data1.php", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.close = +d.close;
data1.push(d.close);
});
d3.json("php/data2.php", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.close = +d.close;
data2.push(d.close);
});
d3.json("php/data3.php", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.close = +d.close;
data3.push(d.close);
});
// More similar functions here
});
var data = extend(data1, data2);
var result = extend(data, data3);
return result;
}
</script>
</body>
</html>
