I am following the gapmind example with my own datasets, using 3 frames but with a single trace for each frame.
The data is logging correctly and contains different data for each frame, but the markers don’t update.
Vue.js is not the problem, as I’ve successfully reproduced the gapminder code in Vue.js.
What could be wrong here?
<template>
<div class="wrapper">
<div ref="divchart">
</div>
</div>
</template>
<script>
var moment = require('moment')
export default {
name: 'plotlyChart',
props: ['chartdata'],
components: {},
data () {
return {
layout:{
colorscale: 'YIGnBu',
font: {
family: 'Roboto',
color: '#EAEAEA'
},
autosize: true,
plot_bgcolor: '#424242',
paper_bgcolor: '#424242',
xaxis: {
range: [0, 600],
tickwidth: 0,
},
yaxis: {
autorange: true,
title: 'Ranking',
tickwidth: 1,
tickcolor: '#EAEAEA',
zeroline: false,
zerolinewidth: 0,
linecolor: '#EAEAEA',
linewidth: 0
},
updatemenus: [{
x: 0,
y: 0,
bgcolor: '#424242',
bordercolor: 'rgba(255,255,255,0.12)',
xanchor: 'top',
yanchor: 'left',
showactive: false,
direction: 'right',
pad: {t: 60, },
}],
sliders: [{
pad: {t: 30, l: -60},
x: 0.05,
len: 0.98,
bgcolor: '#ec407a',
activebgcolor: '#ec407a',
bordercolor: 'rgba(0,0,0,0)',
tickwidth: 0,
borderwidth: 0,
currentvalue: {
visible: true,
// prefix: 'cycle: ',
xanchor: 'right',
font: {color: '#888',size: 20}
},
steps: null
}]
}
}
},
created(){
},
mounted(){
// console.log("traces: ", this.traces)
// console.log('layout: ', this.layout)
// console.log('frames: ', this.frames)
// console.log(this.chartdata[0].time_of_ranking.substring(11,30))
this.layout.sliders[0].steps = this.chartdata.map(d=>{
return {
method: 'animate',
label: moment(d.time_of_ranking.substring(11,30), 'YYYY-MM-DD HH.mm.ss').format('HHmm'),
args: [[moment(d.time_of_ranking.substring(11,30), 'YYYY-MM-DD HH.mm.ss').format('HHmm')], {
mode: 'immediate',
transition: {duration: 500},
frame: {redraw: false, duration: 500},
}]
}
})
Plotly.plot(this.$refs.divchart, {
data: this.traces,
layout: this.layout,
frames: this.frames
});
},
computed:{
...Vuex.mapGetters([]),
frames: function(val){
var f = this.chartdata.map(d=>{
return {
name: moment(d.time_of_ranking.substring(11,30), 'YYYY-MM-DD HH.mm.ss').format('HHmm'),
data: {
x: d.dataframe.map(e=> String(e['001_.key'])),
y: d.dataframe.map(e=> String(e['topsis'])),
id: d.dataframe.map(e=> e['000_name']),
text: d.dataframe.map(e=> e['000_name']),
marker: {
color: d.dataframe.map(e=> e['topsis']),
}
}
}
})
return f
},
traces: function(val){
return [{
name: moment(this.chartdata[1].time_of_ranking.substring(11,30), 'YYYY-MM-DD HH.mm.ss').format('HHmm'),
x: this.chartdata[1].dataframe.map(e=> String(e['001_.key'])),
y: this.chartdata[1].dataframe.map(e=> String(e['topsis'])),
id: this.chartdata[1].dataframe.map(e=> e['000_name']),
text: this.chartdata[1].dataframe.map(e=> e['000_name']),
mode: 'markers',
colorscale: 'YIGnBu',
marker: {
colorscale: 'YIGnBu',
borderwidth: 0,
outlinewidth: 0,
size: this.chartdata[1].dataframe.map(e=> 3),
opacity: 0.6,
color: this.chartdata[1].dataframe.map(e=> e['topsis']),
}
}]
},
},
watch:{
},
methods:{
},
}
</script>
<style lang="stylus" scoped>
@import '../stylus/main'
</style>