在 AMCharts 4 饼图中使用 Jquery UI 滑块

Question

我似乎无法使用 Jquery UI 滑块来处理 AMCharts 4 饼图。我在使用滑块功能时做错了什么，但我不能 100% 确定是什么导致了这个问题。

理想情况下，我想使用滑块循环访问数组中的多个数据集。这个概念适用于常规 HTML 范围滑块，但我认为 Jquery 路线更可扩展。有没有其他人成功地使用 AM Charts 4 饼图实现 Jquery UI 滑块？您想分享任何指示吗？非常感谢任何见解！

  

// Set theme
am4core.useTheme(am4themes_animated);

// Create chart instance
var chart2 = am4core.create("chartdiv2", am4charts.PieChart);

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

// Add data
chart2.data = chart2Data[0];

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

// Let's cut a hole in our Pie chart the size of 40% the radius
chart2.innerRadius = am4core.percent(40);

// Put a thick white border around each Slice
pieSeries.slices.template.stroke = am4core.color("#4a2abb");
pieSeries.slices.template.strokeWidth = 2;
pieSeries.slices.template.strokeOpacity = 1;


// Add a legend
chart2.legend = new am4charts.Legend();
chart2.legend.position = "right";

//Binds data to HTML range slider, carryover from AM Charts 3
function selectDataset(d) {
    chart2.data = chart2Data[d];
    chart2.validateData();
    chart2.animateAgain();
}

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

//Add exposure value to middle of chart
var label = pieSeries.createChild(am4core.Label);
label.text = "${values.value.sum}";
label.horizontalCenter = "middle";
label.verticalCenter = "middle";
label.fontSize = 40;

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

#chartdiv2 {
  width: 100%;
  height: 400px;
}

#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/animated.js"></script>

<div class="container">
<div id="chartdiv2"></div>
<input type="range" min="0" max="4" value="0" name="dataset" step="0" list="ticks" onchange="selectDataset(this.value)">
 
<datalist id="ticks">
  <option>0</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</datalist>

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

Answer 1

如果您的问题是如何让您当前的代码与 jQuery 的 Slider 一起工作，那么问题出在您的 slide 函数选项上：

slide: function(event, ui)  {
    var dataSet = chart2Data[ui.value];

    // "e" doesn't exist here, and nor would changing it to "event" work
    e.chart2.dataProvider = dataSet.value;
    e.chart2.validateData();

    $(ui.handle).text(dataSet.category);
}

更改为以下内容：

slide: function(event, ui)  {
    var dataSet = chart2Data[ui.value];

    // same as the selectDataset() function for the regular HTML range slider
    chart2.data = dataSet;

    chart2.validateData();
    $(ui.handle).text(dataSet.category);
}

工作示例：

// Set theme
am4core.useTheme(am4themes_animated);

// Create chart instance
var chart2 = am4core.create("chartdiv2", am4charts.PieChart);

var chart2Data = [
  // 50/40/10
  [{
      category: "U.S. Equities",
      value: 0.55
    },
    {
      category: "U.S. Fixed Income",
      value: 0.40
    },
    {
      category: "Hybrid Strategy",
      value: 0.07
    },
  ],
  // 40/40/20
  [{
      category: "U.S. Equities",
      value: .50
    },
    {
      category: "U.S. Fixed Income",
      value: .40
    },
    {
      category: "Hybrid Strategy",
      value: .14
    },

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

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

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

  ]
];

// Add data
chart2.data = chart2Data[0];

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

// Let's cut a hole in our Pie chart the size of 40% the radius
chart2.innerRadius = am4core.percent(40);

// Put a thick white border around each Slice
pieSeries.slices.template.stroke = am4core.color("#4a2abb");
pieSeries.slices.template.strokeWidth = 2;
pieSeries.slices.template.strokeOpacity = 1;


// Add a legend
chart2.legend = new am4charts.Legend();
chart2.legend.position = "right";

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

//Add exposure value to middle of chart
var label = pieSeries.createChild(am4core.Label);
label.text = "${values.value.sum}";
label.horizontalCenter = "middle";
label.verticalCenter = "middle";
label.fontSize = 40;

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

#chartdiv2 {
  width: 100%;
  height: 400px;
}

#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/animated.js"></script>

<div class="container">
  <div id="chartdiv2"></div>

  <datalist id="ticks">
  <option>0</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</datalist>

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

在 AMCharts 4 饼图中使用 Jquery UI 滑块

Using Jquery UI Slider with AMCharts 4 Pie Chart

jquery

amcharts

jquery-ui-slider

amcharts4