Управление несколькими графиками с помощью одного слайдера пользовательского интерфейса Jquery - PullRequest
Новая
       22

Управление несколькими графиками с помощью одного слайдера пользовательского интерфейса Jquery

0 голосов
/ 01 октября 2019

Я работаю с примером "Clustered Pie Charts" (https://codepen.io/team/amcharts/pen/XGRYYp) для AM Charts 4. Я добавил несколько наборов данных для каждого графика и пытаюсь использовать слайдер пользовательского интерфейса Jquery для циклического перемещения по этим наборам данныхЯ в основном пытаюсь использовать 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>

Ответы [ 2 ]

0 голосов
/ 03 октября 2019

Мне удалось заставить это работать, создав отдельные массивы и привязав их обратно к функции слайдов. Пример "Clusted Pie Charts" от AM Charts довольно дурацкий и отличается от типичных методов вызова и построения массивов. Большое спасибо @Twisty за то, что он указал мне правильное направление. 

function am4themes_myTheme(target) {
  if (target instanceof am4core.ColorSet) {
    target.list = [
      am4core.color("#0063a0"),
      am4core.color("#c0504d"),
      am4core.color("#51d3d0")
          ];
  }
}


// Set theme
am4core.useTheme(am4themes_animated);
am4core.useTheme(am4themes_myTheme);

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

var chartData = [
    // 50/40/10
    [
        { 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", value: 50},
        
    ]
];

var chart2Data = [
    // 50/40/10
    [
        { 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},
        
    ]
];

// Add data
chart.data = chartData[0];

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

// Let's cut a hole in our Pie chart the size of 40% the radius
chart.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;


chart2.data = chart2Data[0];

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

// 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
pieSeries2.slices.template.stroke = am4core.color("#4a2abb");
pieSeries2.slices.template.strokeWidth = 2;
pieSeries2.slices.template.strokeOpacity = 1;


// Add a legend
chart.legend = new am4charts.Legend();
chart2.legend = new am4charts.Legend();

function selectDataset(d) {
    chart.data = chartData[d];
    chart.validateData();
    chart.animateAgain();
}

function selectDataset2(d) {
    chart2.data = chart2Data[d];
    chart2.validateData();
    chart2.animateAgain();
}

var label = pieSeries2.createChild(am4core.Label);
label.text = "${values.value.sum}";
label.horizontalCenter = "middle";
label.verticalCenter = "middle";
label.fontSize = 40;

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

$( "#slider" ).slider({
    value: 10,
    min: 10,
    max: 50,
    step: 10
})
.each(function() {

  //
  // Add labels to slider whose values 
  // are specified by min, max and whose
  // step is set to 1
  //

  // Get the options for this slider
  var opt = $(this).data().uiSlider.options;
  
  // Get the number of possible values
  var vals = opt.max - opt.min;
  
  // Space out values
  for (var i = 0; i <= vals; i++) {
    
    var el = $('<label>'+(i*10+10)+'%'+'</label>').css('left',(i/vals*1000)+'%');
  
    $( "#slider" ).append(el);
    
  }
  
});
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.container 
{
  margin-top: 100px;
}
#chartdiv, #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;
}

#slider label {
    position: absolute;
    width: 20px;
    margin-left: -10px;
    text-align: center;
    margin-top: 20px;
}

#slider .ui-slider-handle {
  outline: 0;
  background: #c0504d;
  border-radius: 50px;
  top: -.6em;
}

#slider.ui-slider-horizontal {
  top: 1em;
  left: 5%;
  height: .1em;
  width: 90%;
  border: none;
  background: #ccc;
}
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://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 id="slider"></div>
<div class="container">
<div style="width: 50%; float: left;" id="chartdiv"></div>
<div style="width: 50%; float: right;" id="chartdiv2"></div>
</div>
0 голосов
/ 01 октября 2019

Буду искренним, я никогда не пользовался этой библиотекой и смотрю на документы, они были менее чем полезны.

Вот основной рабочий пример: 

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.category);
    },
    slide: function(event, ui) {
      var curDataSet = dataset[ui.value];
      var chart = drawChart(curDataSet, container);
      chart.validateData();
      $(ui.handle).text(curDataSet.category);
    }
  });
});
<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>

Имеются некоторые проблемы. Например, я подозреваю, что вы хотите, чтобы график очистил текущие данные перед загрузкой следующих. Я не мог определить, как это было сделано, используя диаграмму или контейнер. Таким образом, диаграммы накапливаются, но набор данных меняется на нужный.

У вас также есть ссылки на индекс, который, по-видимому, не существует: category. Я не уверен, что вы пытались сделать с этим.

...