小编pro*_*et5的帖子
D3.js跨多个图同步缩放
我想制作折线图,以便与多个网页同步缩放/平移.
这些客户端具有相同的Javascript和HTML源.用户缩放或平移客户端A,将数据域的日期时间的消息发送给另一个和发送者(上图中的蓝线),并且接收的客户端的图表将同时更改.当然,其他客户也可以这样做.它类似于聊天应用程序.
缩放功能是:
function zoomed() {
let msg = [];
let t = d3.event.transform; //1)
msg[0] = t.rescaleX(x2).domain()[0].toString(); //2)
msg[1] = t.rescaleX(x2).domain()[1].toString(); //2)
sendMessage(msg); //3)
}
- d3.event.transform捕获鼠标事件.
- 转换为日期时间和字符串.
- 将新的扩展域发送到服务器.
服务器将收到的数据发送给所有客户
function passiveZoom(rcv){
let leftend;
let rightend;
leftend = new Date(rcv[0]);
rightend = new Date(rcv[1]);
x.domain([leftend, rightend]);
svg.select(".line").attr("d", valueline);
svg.select(".axis").call(xAxis);
}
- 收到来自服务器的消息,其中包含新的一天时间.
- 设置新域名,
- 更新折线图.
通过这种方式,可以缩放所有折线图.
但是,它不能按要求工作.
如果我在客户端A中进行缩放,则客户端B和客户端C将被更改.那没问题.
接下来,我在客户端C上放大(上图中的橙色线),所有图形都变为初始比例和位置.为什么!？
我假设鼠标坐标没有发送到客户端,但是当我发送鼠标的位置坐标时应该如何处理？
缩放|平移过程是从mbostock的块中分叉的:画笔和缩放.发件人还会更改X2域的范围t.rescalex (x2).domain().由于X2未在图纸中使用,我将X更改为x2,但我只能放大.我不明白X2的含义.
您能告诉我如何同步所有客户吗？什么是x2？
<!DOCTYPE html>
<meta charset="utf-8">
<style>
/* set the CSS */ …推荐指数
解决办法
查看次数
Chart.js 具有一个共同图例的多个图表
一页上有多个图表。每条图表线都是通用的。我想显示像图这样的多个图表共有的图例。它像默认图例一样使用 OnClick 显示和隐藏所有图表线。
这张照片是假的
那可能吗？如何？
我曾在多个图表、一个图例、多个图表 Chart JS等上尝试过Chart.js 同步图例切换。但是，这些解决方案有一个带有图例的图表，而该图例会影响其他图表。
我应该隐藏图表并只显示图例吗？我应该在没有数据的情况下绘制图表吗？
如果你能告诉我，我会毕业的
HTML
<script src="https://rawgit.com/nnnick/Chart.js/v1.0.2/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.0-beta/Chart.js"></script>
<div>
<canvas id="myChartA"></canvas>
</div>
<div>
<canvas id="myChartB"></canvas>
</div>
JS
var ctxA = document.getElementById("myChartA").getContext("2d");
var ctxB = document.getElementById("myChartB").getContext("2d");
let data_A1 = [{
x: "2019-01-01 00:01:38",
y: "13.0"
},
{
x: "2019-01-01 01:01:39",
y: "11.0"
},
{
x: "2019-01-01 02:01:40",
y: "16.0"
},
{
x: "2019-01-01 03:01:41",
y: "15.0"
},
{
x: "2019-01-01 04:01:42",
y: "14.0"
}
]; …推荐指数
解决办法
查看次数
Chart.js？如何在多个聊天中同步平移和缩放
我想在多个图表上同步平移和缩放。我一直在使用 Chart.js 和 chartjs-plugin-zoom。
charjs-plugin-zoom 使用 onZoom 回调函数调用事件。所以，X轴两端的值是通过回调函数以这种方式获取的。
onZoom: function () {
var minVal = myChartA.getDatasetMeta(0).dataset._scale.chart.scales['x-axis-0']._table[0].time;
var maxVal = myChartA.getDatasetMeta(0).dataset._scale.chart.scales['x-axis-0']._table[1].time;
leftEnd = minVal;
rightEnd = maxVal;
updateChart();
}
然后使用 updateChart 函数更新图表。
我以为其他图表应该用updateChart函数获得的X轴两端的值来更新。使用 Chart.helpers.each 调用 update() 以更新所有图表。
function updateChart() {
Chart.helpers.each(Chart.instances, function (instance) {
instance.oprions = {
scales: [{
xAxes: {
time: {
min: leftEnd,
max: rightEnd
}
}
}]
};
instance.update();
});
}
然而，并没有得到预期的结果。Zoom-PAN 仅反映操作的图表。
我认为 onZoom 回调函数获取 X 轴的两个边缘，并每帧更新图表。图表只能使用选项更新，因此 Chart.helpers.each 可用于一次更新所有图表。如果要更新的X轴两端都是全局变量，则所有图形都可以引用。
这个方法不正确吗？选项更新方法错了吗？更新时间不对？
更新
我通过参考https://www.chartjs.org/docs/latest/developers/updates.html了解了如何更新图表。
实际上，多个图表的 X 轴刻度范围已更改，但最大缩放并再次停止工作。 …
推荐指数
解决办法
查看次数