Если ваш вопрос состоит в том, как заставить ваш текущий код работать с ползунком jQuery, то проблема заключается в вашей функции 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>