javascript - 使用 jquery 滑块将缩放应用于多个 Amcharts 4 图表
问题描述
我有一个带有两个或多个带有 dateAxis 的 XYCharts 的容器,我想使用 jQuery 滑块同时更改容器中所有图表的缩放比例。我试图让下面的函数运行,但它不起作用。
$("#slider-range").slider({
animate: "fast",
range: true,
min: 0,
max: 1,
step: 0.01,
values: [0, 1],
slide: function (event, ui) {
for (var i = 0; i < container.children.length; i++) {
container.children[i].dateAxis[0].start = ui.values[0];
container.children[i].dateAxis[0].end = ui.values[1];
}
}
});
我总是收到错误消息'无法读取未定义的属性'dateAxis''
这是我的代码:
am4core.ready(function () {
am4core.useTheme(am4themes_animated);
container = am4core.create("container", am4core.Container);
container.width = am4core.percent(100);
container.height = am4core.percent(100);
container.layout = "vertical";
});
function createSimpleLineChart() {
var chart = container.createChild(am4charts.XYChart);
...
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.baseInterval = { "timeUnit": "second", "count": 1 };
...
return chart;
}
解决方案
您的幻灯片方法存在几个问题:
1)你正在通过你的容器children
不正确。该children
属性不是可以直接索引的数组;它是一个List 对象,具有可用于访问每个元素的特定方法。在这种情况下,使用该each
方法循环遍历孩子是要走的路。
2) 图表对象中没有dateAxis
属性。每个图表的轴对象都存储在对应的yAxes
和xAxes
属性中,这些属性也是List对象。假设每个图表只有一个日期轴,您可以使用 直接访问它getIndex
。另请注意,您可能会发现调用该zoom
方法比直接修改更start
干净end
。
把它们放在一起:
slide: function (event, ui) {
container.children.each(function(chart) {
chart.xAxes.getIndex(0).zoom({start: ui.values[0], end: ui.values[1]}, false, true);
//chart.xAxes.getIndex(0).start = ui.values[0];
//chart.xAxes.getIndex(0).end = ui.values[1];
});
}
演示如下:
am4core.useTheme(am4themes_animated);
var container = am4core.create("container", am4core.Container);
container.width = am4core.percent(100);
container.height = am4core.percent(100);
container.layout = "vertical";
$("#slider-range").slider({
animate: "fast",
range: true,
min: 0,
max: 1,
step: 0.01,
values: [0, 1],
slide: function(event, ui) {
container.children.each(function(chart) {
chart.xAxes
.getIndex(0)
.zoom({ start: ui.values[0], end: ui.values[1] }, false, true);
//chart.xAxes.getIndex(0).start =ui.values[0];
//chart.xAxes.getIndex(0).end =ui.values[1];
});
}
});
createCharts();
function createCharts() {
var chart = container.createChild(am4charts.XYChart);
var data = generateData();
chart.data = data;
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.dateX = "date";
series.dataFields.valueY = "price";
series.tooltipText = "{valueY.value}";
series.name = "Series 1";
chart.zoomOutButton.disabled = true;
chart2 = container.createChild(am4charts.XYChart);
chart2.data = data;
var dateAxis2 = chart2.xAxes.push(new am4charts.DateAxis());
var valueAxis2 = chart2.yAxes.push(new am4charts.ValueAxis());
var series2 = chart2.series.push(new am4charts.ColumnSeries());
series2.columns.template.width = am4core.percent(50);
series2.dataFields.dateX = "date";
series2.dataFields.valueY = "quantity";
series2.yAxis = valueAxis2;
series2.tooltipText = "{valueY.value}";
series2.name = "Series 2";
chart2.zoomOutButton.disabled = true;
}
function generateData() {
var data = [];
var price = 100;
var quantity = 1000;
for (var i = 0; i < 300; i++) {
price += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 100);
quantity += Math.round(
(Math.random() < 0.5 ? 1 : -1) * Math.random() * 1000
);
data.push({ date: new Date(2000, 1, i), price: price, quantity: quantity });
}
return data;
}
#container {
width: 95%;
height: 400px;
}
#slider-range {
width: 95%;
height: 10px;
border: 1px solid #000;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="container"></div>
<div id="slider-range"></div>
推荐阅读
- c# - 在 Blazor 组件中获取当前用户
- python - Jinja2 电子邮件模板
- sonos - 为什么 SONOS 的自定义 SD 系统不再工作?
- hibernate - 将枚举作为方法参数传递会导致 Hibernate 异常
- r - 带有 dplyr 的 for 循环
- python - python scipy 无法传递从类属性生成的数据框?
- elasticsearch - 将 Pelias/Elasticsearch 文件/数据从索引器服务器传输到生产服务器
- sql - 比较两个日期Oracle的多案例
- apache-spark - 如何为 Spark 的 ML 算法提供外部超参数
- javascript - ReactJs 无法将日期格式更改为 24 小时