将 Jquery UI Slider 与 AMCharts 4 饼图结合使用

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>