Поиск библиотеки или компонента анимированных гистограмм

Я заинтересован в создании гистограммы, которая изменяется со временем (в идеале столбцы будут плавно перемещаться вверх и вниз, чтобы отображать изменения данных с течением времени). Я не ожидал, что это будет сложно, но, возможно, из-за того, как я ищу, я не могу найти готовый компонент или библиотеку, которая делает это. Я встречал и другие анимированные графики, показывающие изменения данных с течением времени (например, https://developers.google.com/chart/interactive/docs/gallery/motionchart и http://www.highcharts.com/demo/dynamic-update), но ничего из того, что я описываю на гистограмме. Было бы также работать, если бы я мог найти линейную диаграмму или круговую диаграмму, которая плавно менялась с течением времени, но я бы предпочел сделать гистограмму, чтобы сделать это, если это возможно.

Существует ли подобное приложение, компонент или библиотека (и если да, можете ли вы указать мне правильное направление)? Если по какой-то причине ничего подобного не доступно, что ближе всего к этому доступному (какой путь потребует наименьших усилий для создания этой диаграммы)?


dynamic charts motion
person David    schedule 13.02.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

ZingChart должен сделать это за вас, и им очень легко пользоваться. Конфигурация диаграммы определяется с помощью объекта JSON. Внутри сюжетного объекта объект анимации может содержать несколько различных параметров анимации, включая эффект, скорость, задержку и последовательность. Дополнительную информацию об эффектах анимации ZingChart можно найти здесь. Метод render вызывается, чтобы сообщить ZingChart, где визуализировать диаграмму, используя уникальный идентификатор div. В этом примере я настроил функцию, которая будет вызываться каждые 3000 миллисекунд, генерируя случайный массив чисел от 0 до 100, используя метод setseriesvalues ​​ для изменения данных в plotindex 0.

var oData = {
  "type": "bar",
  "scaleY": {
    "values": "0:100:10"
  },
  "plot": {
    "animation": {
      "effect": "ANIMATION_SLIDE_BOTTOM"
    }
  },
  "series": [{
    "values": [69, 68, 54, 48, 70, 74, 98, 70, 72, 68, 49, 69]
  }]
};

zingchart.render({
  id: 'myChartDiv',
  width: 600,
  height: 400,
  data: oData
});

setInterval(function() {
  var aValues = [];
  for (var n = 0; n < 12; n++) {
    var num = Math.random() * (100 - 0) + 0;
    aValues.push(num);
  }
  console.log(aValues);
  zingchart.exec('myChartDiv', 'setseriesvalues', {
    plotindex: 0,
    values: aValues
  });
}, 3000);
<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<div id="myChartDiv"></div>

Полный отказ от ответственности: я в команде ZingChart, но если я могу вам чем-то помочь, я буду рад помочь!

person Stalfos    schedule 17.02.2015
comment
Спасибо, выглядит отлично! - person David; 30.06.2015