【发布时间】：2019-10-01 16:16:53
【问题描述】：
我正在使用 AM Charts 4 的“聚集饼图”示例 (https://codepen.io/team/amcharts/pen/XGRYYp)。我为每个图表添加了多个数据集，并尝试使用 Jquery UI Slider 循环浏览这些数据集。我基本上是在尝试使用 UI Slider 来控制多个图表以及这些图表的相应数据集。我似乎无法让滑块识别数据集的名称。绝对是滑动功能的问题。有任何人对此有经验吗？任何见解将不胜感激！
我能够将单个滑块与单个图表/数据集配对 (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>【问题讨论】：
-
欢迎来到 Stack Overflow。回顾这一点，您的数据结构和尝试看起来很重要。滑块适用于整数值。我看不到的一件事是：
var dataSet = data[0];data定义在哪里？ -
这就是让我绊倒的地方。不确定当前的数组格式是否适用于 UI 滑块。或者，如果可以，不确定如何在滑块函数中引用数据集。 AM Charts 用于此示例的方法对数据集的格式设置与其他示例略有不同。
-
好吧，我看不到
data在滑块范围内的任何位置定义的位置。与chart相同 -
是的，你是对的。在其他示例中，它们明确定义了驱动图表的数组，例如“var chartData = array info”。在多个图表示例中，它们不遵循这种格式。
标签： jquery jquery-ui amcharts amcharts4