ReactiveChart.vue 774 B

12345678910111213141516171819202122232425262728
  1. <template>
  2. <div :ref="chart.uuid"></div>
  3. </template>
  4. <script>
  5. var Plotly = require('plotly.js');
  6. export default {
  7. name: "ReactiveChart",
  8. props: ["chart"],
  9. mounted() {
  10. Plotly.newPlot(this.$refs[this.chart.uuid], this.chart.traces,
  11. this.chart.layout,
  12. {responsive: true, showSendToCloud: true, displaylogo: false}
  13. );
  14. },
  15. watch: {
  16. chart: {
  17. handler: function() {
  18. Plotly.react(
  19. this.$refs[this.chart.uuid],
  20. this.chart.traces,
  21. this.chart.layout
  22. );
  23. },
  24. deep: true
  25. }
  26. }
  27. }
  28. </script>