javascript - 使用 jquery slider 将缩放应用于多个 Amcharts 4 图表

Question

我有一个包含两个或多个带有 dateAxis 的 XYChart 的容器，我想使用 jQuery slider 同时更改容器中所有图表的缩放。我尝试让下面的函数运行，但它不起作用。

$("#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;
}

Answer 1

您的幻灯片方法存在几个问题:

1) 您正在查看容器的 children错误地。 children 属性不是一个可以直接索引的数组；这是一个List object它具有可用于访问每个元素的特定方法。在本例中，使用each循环遍历 child 的方法是要走的路。

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>