Как оживить гистограмму морриса?
Я пытаюсь анимировать гистограмму Морриса, отображается гистограмма Морриса, но мне нужна анимация и разные цвета для каждого бара. И мой код:
success:function(response){
$('body').css('cursor', 'default');
if(response.status == 'success'){
var productValueCountList=response.productcountlist;
$('#productCount-bar').empty();
if(productValueCountList=='')
{vex.dialog.alert("No record found")
return false;
}
Morris.Bar({
element: 'productCount-bar',
data:productValueCountList,
xkey: 'productName',
ykeys: ['productCount'],
labels: ['Number of Product'],
barRatio: 0.3,
barSizeRatio:0.3,
xLabelAngle:25,
//seriesColors:['#85802b', '#00749F', '#73C774', '#C7754C'],
// barColors: ["#B21516", "#1531B2", "#1AB244", "#B29215"],
hideHover: 'auto'
});
В приведенном выше коде productcountlist
это массив JSON Пожалуйста, помогите мне или дайте мне другое решение.
3 ответа
Добавление анимации к диаграммам Морриса возможно с помощью функции animate в Raphael js, но необходимо внести много изменений в код.
Основная идея заключается в том, что нам нужно создать прямой путь, который будет связан с путем, вычисленным Моррисом.
Ниже я покажу, как я делал со сценарием Coffee:
drawLinePath: (path, lineColor, lineIndex) ->
straightPath = ''
for row, ii in @data
if straightPath == ''
straightPath = 'M'+row._x+','+@transY(@ymin)
else
straightPath += ','+row._x+','+@transY(@ymin)
rPath = @raphael.path(straightPath)
.attr('stroke', lineColor)
.attr('stroke-width', this.lineWidthForSeries(lineIndex))
do (rPath, path) =>
rPath.animate {path}, 500, '<>'
Ниже приведен полученный JavaScript:
Line.prototype.drawLinePath = function(path, lineColor, lineIndex) {
var ii, rPath, row, straightPath, _i, _len, _ref,
_this = this;
straightPath = '';
_ref = this.data;
for (ii = _i = 0, _len = _ref.length; _i < _len; ii = ++_i) {
row = _ref[ii];
if (straightPath === '') {
straightPath = 'M' + row._x + ',' + this.transY(this.ymin);
} else {
straightPath += ',' + row._x + ',' + this.transY(this.ymin);
}
}
rPath = this.raphael.path(straightPath).attr('stroke', lineColor).attr('stroke-width', this.lineWidthForSeries(lineIndex));
return (function(rPath, path) {
return rPath.animate({
path: path
}, 500, '<>');
})(rPath, path);
};
Поскольку мне также требовалась эта функция, я сделал форк из Morris, и те, кто заинтересован в этом, могут проверить его здесь: https://pierresh.github.io/morris.js/
Для анимации я ищу точно такую же вещь;) Но для цветов ваш массив данных должен быть таким:
var data = {
labels: ["l1", "l2", "l3"],
datasets: [
{
label: "In",
fillColor: "rgba(220,220,220,0)",
strokeColor: "rgba(37,131,154,1)",
pointColor: "#fff",
pointStrokeColor: "#rgba(37,131,154,1)",
pointHighlightFill: "rgba(37,131,154,1)",
pointHighlightStroke: "rgba(37,131,154,1)",
data: [1000, 2000, 3000]
},
{
label: "Out",
fillColor: "rgba(220,220,220,0)",
strokeColor: "#ffa874",
pointColor: "#fff",
pointStrokeColor: "#ffa874",
pointHighlightFill: "#ffa874",
pointHighlightStroke: "#ffa874",
data: [3000, 2000, 1000]
}
]};
Если вам нужны разные цвета для одного и того же набора данных, я думаю, что это не нативный вариант... Возможно, я ошибаюсь, и если вы что-то финансируете, поделитесь;)
Это можно просто сделать с помощью атрибута barColors:
Проверьте приведенный ниже пример:
take data in json
var plotdata =[{"x":"A","y1":59,"y2":64,"y3":834,"y4":787},{"x":"B","y1":597,"y2":615,"y3":837,"y4":787}];
morris = Morris.Bar({
element: 'normal-bar',
data: plotdata,
xkey: 'x',
ykeys: ['y1', 'y2', 'y3','y4'],
labels: ['Label1', 'Label2', 'Label3','label4'],
barColors: ["#3498db", "#26A65B", "#1F3A93", "#6C7A89"],
})