使用单个Jquery UI滑块控制多个图表

Question

我正在使用AM图表的“群集饼图”示例（https://codepen.io/team/amcharts/pen/XGRYYp）。4。我为每个图表添加了多个数据集，并试图使用Jquery UI Slider循环浏览这些数据集。我基本上是试图使用UI滑块来控制多个图表以及这些图表的相应数据集。我似乎无法使滑块识别数据集的名称。滑动功能绝对是一个问题。有人对此有经验吗？任何见解将不胜感激！

我能够将单个滑块与单个图表/数据集（https://codepen.io/greg-griffith/pen/Rwbmpga配对，但是尝试将单个滑块与多个图表/数据集配对并没有太大的运气。

// Create chart instance
var container = am4core.create("chartdiv", am4core.Container);
container.width = am4core.percent(100);
container.height = am4core.percent(100);
container.layout = "horizontal";

am4core.useTheme(am4themes_animated);
am4core.useTheme(am4themes_material);

function createChart(data) {

  // Create chart
  var chart = container.createChild(am4charts.PieChart);

  // Add data
  chart.data = data;

  // Add and configure Series
  var pieSeries = chart.series.push(new am4charts.PieSeries());
  pieSeries.dataFields.value = "value";
  pieSeries.dataFields.category = "country";
 // pieSeries.labels.template.disabled = true;
  //pieSeries.ticks.template.disabled = true;
  
};

createChart([
        { country: "U.S. Equities", value: 50},
        { country: "U.S. Fixed Income",value: 40},
        { country: "Hybrid Strategy", value: 10},
        ],
     // 40/40/20
        [
        { country: "U.S. Equities", value: 40},
        { country: "U.S. Fixed Income", value: 40},
        { country: "Hybrid Strategy", value: 20},
        
    ],
   // 30/40/30
    [
        { country: "U.S. Equities", value: 30},
        { country: "U.S. Fixed Income", value:40},
        { country: "Hybrid Strategy", value: 30},
       
    ],
     // 20/40/40
    [
        { country: "U.S. Equities", value: 20},
        { country: "U.S. Fixed Incomed", value: 40},
        { country: "Hybrid Strategy", value: 40},
       
    ],
    // 10/40/50
    [
        { country: "U.S. Equities", value: 10},
        { country: "U.S. Fixed Income", value: 40},
        { country: "Hybrid Strategy", values: 50},
        
    ]);

createChart([
        { country: "U.S. Equities", value: 0.55},
        { country: "U.S. Fixed Income", value: 0.40},
        { country: "Hybrid Strategy", value: 0.07},
        ],
     // 40/40/20
        [
        { country: "U.S. Equities", value: .50},
        { country: "U.S. Fixed Income", value: .40},
        { country: "Hybrid Strategy", value: .14},
        
    ],
   // 30/40/30
    [
        { country: "U.S. Equities", value: .45},
        { country: "U.S. Fixed Income", value: .40},
        { country: "Hybrid Strategy", value: .21},
       
    ],
     // 20/40/40
    [
        { country: "U.S. Equities", value: .40},
        { country: "U.S. Fixed Incomed", value: .40},
        { country: "Hybrid Strategy", value: .28},
       
    ],
    // 10/40/50
    [
        { country: "U.S. Equities", value: .35},
        { country: "U.S. Fixed Income", value: .40},
        { country: "Hybrid Strategy", value: .35},
        
    ]);

createChart([
        { country: "U.S. Equities", value: 52},
        { country: "U.S. Fixed Income", value: 38},
        { country: "Hybrid Strategy", value: 10},
        ],
     // 40/40/20
        [
        { country: "U.S. Equities", value: .50},
        { country: "U.S. Fixed Income", value: .40},
        { country: "Hybrid Strategy", value: .14},
        
    ],
   // 30/40/30
    [
        { country: "U.S. Equities", value: .45},
        { country: "U.S. Fixed Income", value: .40},
        { country: "Hybrid Strategy", value: .21},
       
    ],
     // 20/40/40
    [
        { country: "U.S. Equities", value: .40},
        { country: "U.S. Fixed Incomed", value: .40},
        { country: "Hybrid Strategy", value: .28},
       
    ],
    // 10/40/50
    [
        { country: "U.S. Equities", value: .35},
        { country: "U.S. Fixed Income", value: .40},
        { country: "Hybrid Strategy", value: .35},
        
    ]);



$(function() {
  $("#slider").slider({
    //range: true,
    min: 0,
    max: 4,
    step: 1,
    value: 0,
    create: function(event, ui) {
      var dataSet = data[0];
      $("#slider .ui-slider-handle").text(dataSet.category);
    },
    slide: function(event, ui) {
      var dataSet = data[ui.value];
      chart.data = dataSet;
      chart.validateData();
      $(ui.handle).text(dataSet.category);
    },
    
  });
});

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#chartdiv {
  width: 100%;
  height: 200px;
}

#slider {
  margin-top: 20px;
}

.ui-slider .ui-slider-handle {
  width: 3.2em!important;
  text-align: center;
  margin-left: -1.6em!important;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<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/material.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>

<div class="container">

<div id="chartdiv">
  
  
  </div>
 <div id="slider"></div>
</div>

Answer 1

我会先行，我从未使用过该库，而查看文档时，它们的帮助不足。

这是一个基本的工作示例：

var dataset = [];
dataset.push([{
      country: "U.S. Equities",
      value: 50
    },
    {
      country: "U.S. Fixed Income",
      value: 40
    },
    {
      country: "Hybrid Strategy",
      value: 10
    },
  ],
  // 40/40/20
  [{
      country: "U.S. Equities",
      value: 40
    },
    {
      country: "U.S. Fixed Income",
      value: 40
    },
    {
      country: "Hybrid Strategy",
      value: 20
    },

  ],
  // 30/40/30
  [{
      country: "U.S. Equities",
      value: 30
    },
    {
      country: "U.S. Fixed Income",
      value: 40
    },
    {
      country: "Hybrid Strategy",
      value: 30
    },

  ],
  // 20/40/40
  [{
      country: "U.S. Equities",
      value: 20
    },
    {
      country: "U.S. Fixed Incomed",
      value: 40
    },
    {
      country: "Hybrid Strategy",
      value: 40
    },

  ],
  // 10/40/50
  [{
      country: "U.S. Equities",
      value: 10
    },
    {
      country: "U.S. Fixed Income",
      value: 40
    },
    {
      country: "Hybrid Strategy",
      values: 50
    },

  ]);
dataset.push([{
      country: "U.S. Equities",
      value: 0.55
    },
    {
      country: "U.S. Fixed Income",
      value: 0.40
    },
    {
      country: "Hybrid Strategy",
      value: 0.07
    },
  ],
  // 40/40/20
  [{
      country: "U.S. Equities",
      value: 0.50
    },
    {
      country: "U.S. Fixed Income",
      value: 0.40
    },
    {
      country: "Hybrid Strategy",
      value: 0.14
    },

  ],
  // 30/40/30
  [{
      country: "U.S. Equities",
      value: 0.45
    },
    {
      country: "U.S. Fixed Income",
      value: 0.40
    },
    {
      country: "Hybrid Strategy",
      value: 0.21
    },

  ],
  // 20/40/40
  [{
      country: "U.S. Equities",
      value: 0.40
    },
    {
      country: "U.S. Fixed Incomed",
      value: 0.40
    },
    {
      country: "Hybrid Strategy",
      value: 0.28
    },

  ],
  // 10/40/50
  [{
      country: "U.S. Equities",
      value: 0.35
    },
    {
      country: "U.S. Fixed Income",
      value: 0.40
    },
    {
      country: "Hybrid Strategy",
      value: 0.35
    },

  ]);
dataset.push([{
      country: "U.S. Equities",
      value: 52
    },
    {
      country: "U.S. Fixed Income",
      value: 38
    },
    {
      country: "Hybrid Strategy",
      value: 10
    },
  ],
  // 40/40/20
  [{
      country: "U.S. Equities",
      value: 0.50
    },
    {
      country: "U.S. Fixed Income",
      value: 0.40
    },
    {
      country: "Hybrid Strategy",
      value: 0.14
    },

  ],
  // 30/40/30
  [{
      country: "U.S. Equities",
      value: 0.45
    },
    {
      country: "U.S. Fixed Income",
      value: 0.40
    },
    {
      country: "Hybrid Strategy",
      value: 0.21
    },

  ],
  // 20/40/40
  [{
      country: "U.S. Equities",
      value: 0.40
    },
    {
      country: "U.S. Fixed Incomed",
      value: 0.40
    },
    {
      country: "Hybrid Strategy",
      value: 0.28
    },

  ],
  // 10/40/50
  [{
      country: "U.S. Equities",
      value: 0.35
    },
    {
      country: "U.S. Fixed Income",
      value: 0.40
    },
    {
      country: "Hybrid Strategy",
      value: 0.35
    }
  ]);

$(function() {
  am4core.useTheme(am4themes_animated);
  am4core.useTheme(am4themes_material);
  var container = am4core.create("chartdiv", am4core.Container);
  container.width = am4core.percent(100);
  container.height = am4core.percent(100);
  container.layout = "horizontal";

  function drawChart(d, c) {
    // Create chart
    var chart = c.createChild(am4charts.PieChart);

    // Add data
    chart.data = d;

    // Add and configure Series
    var pieSeries = chart.series.push(new am4charts.PieSeries());
    pieSeries.dataFields.value = "value";
    pieSeries.dataFields.category = "country";

    return chart;
  }


  $("#slider").slider({
    min: 0,
    max: 4,
    step: 1,
    value: 0,
    create: function(event, ui) {
      var dataSet = dataset[0];
      $("#slider .ui-slider-handle").text(dataSet.ccountry);
    },
    slide: function(event, ui) {
      var curDataSet = dataset[ui.value];
      var chart = drawChart(curDataSet, container);
      chart.validateData();
      $(ui.handle).text(curDataSet.country);
    }
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<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/material.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<div class="container">
  <div id="chartdiv"></div>
  <div id="slider"></div>
</div>

它有一些问题。例如，我怀疑您希望图表在加载下一个数据之前清除当前数据。我无法确定如何使用图表或容器完成此操作。因此，图表堆积如山，但数据集正在更改为所需的一组。