Я знаю, что этот вопрос слишком стар, но я не видел никакой реализации, подобной моей. Эта версия основана на символе преобразования Шварца .
function sortByAttribute(array, ...attrs) {
// generate an array of predicate-objects contains
// property getter, and descending indicator
let predicates = attrs.map(pred => {
let descending = pred.charAt(0) === '-' ? -1 : 1;
pred = pred.replace(/^-/, '');
return {
getter: o => o[pred],
descend: descending
};
});
// schwartzian transform idiom implementation. aka: "decorate-sort-undecorate"
return array.map(item => {
return {
src: item,
compareValues: predicates.map(predicate => predicate.getter(item))
};
})
.sort((o1, o2) => {
let i = -1, result = 0;
while (++i < predicates.length) {
if (o1.compareValues[i] < o2.compareValues[i]) result = -1;
if (o1.compareValues[i] > o2.compareValues[i]) result = 1;
if (result *= predicates[i].descend) break;
}
return result;
})
.map(item => item.src);
}
Вот пример того, как его использовать:
let games = [
{ name: 'Pako', rating: 4.21 },
{ name: 'Hill Climb Racing', rating: 3.88 },
{ name: 'Angry Birds Space', rating: 3.88 },
{ name: 'Badland', rating: 4.33 }
];
// sort by one attribute
console.log(sortByAttribute(games, 'name'));
// sort by mupltiple attributes
console.log(sortByAttribute(games, '-rating', 'name'));
В vue-chartjs
второй аргумент renderChart()
представляет собой конфигурацию config для диаграммы, которая может содержать свойства scales.xAxes
и scales.yAxes
для установки цвета осей (т.е. , сетка):
this.renderChart( /* data */ , {
scales: {
xAxes: [{
display: true,
gridLines: {
display: true,
color: '#eee'
},
}],
yAxes: [{
display: true,
gridLines: {
display: true,
color: '#eee'
},
}]
}
})
Vue.component('line-chart', {
extends: VueChartJs.Line,
mounted () {
this.renderChart({
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'Data One',
backgroundColor: '#f87979',
data: [40, 39, 10, 40, 39, 80, 40]
}
],
}, {
responsive: true, maintainAspectRatio: false,
scales: {
xAxes: [{
display: true,
gridLines: {
display: true,
color: '#444'
},
}],
yAxes: [{
display: true,
gridLines: {
display: true,
color: '#444'
},
}]
}
})
}
})
new Vue({
el: '.app',
})
.app {
background-image: radial-gradient(#2e3f61, #131b29);
}
<script src="https://unpkg.com/vue@2.5.16"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script src="https://unpkg.com/vue-chartjs@3.0.1-rc2/dist/vue-chartjs.js"></script>
<div class="app">
<line-chart></line-chart>
</div>