Question

我有方法 getDataA 我获取此数据后我正在进行一些计算。当我使用总线事件传递kdata时它是更新。

getDataA: function (kdata) {

  var doingcalculation = kdata;
  this.showSideBarGraph(doingcalculation);

}

  mounted: function () {
      bus.$on('updated', this.getDataA);
    }

所以，第一次它正在工作但是当我在 getDataA 上传递一个事件时，它会使用新数据创建一个新图形！

这是我的 showSideBarGraph ，其中一个正在创建图表。

showSideBarGraph: function (mresult) {

      var totaldata = mresult;

      var perfbud =[[
                    {"value": self.g1total,
                      "color": "#6aae6a"},
                    {"value": self.g1col2,
                      "color": "#356307"},
                    { "value": self.g1col1,
                      "color": "#005128"}
                  ],
                  [
                    {"value": self.g2total,
                      "color": "#6aae6a"},
                    {"value": self.g2col2 ,
                      "color": "#356307"},
                    { "value": self.g2col1,
                      "color": "#005128"}
                  ]
                ];


        new RadialProgressChart(".graph", {
        stroke: {
        width: 24,
        gap: 14
        },
        animation: {
        duration: -1,
        delay: -1
        },
        series: perfbud[0]
        });

        /////////
        new RadialProgressChart('.graph2', {
        // diameter: 42,
        stroke: {
        width: 24,
        gap: 14
        },
        animation: {
        duration: -1,
        delay: -1
        },
        // data is now from Vue object

        series:perfbud[1]
        }
        )

        ////// Linear Bar


        var umsatz=[{
          "name": "Jan",
          "value": um1},{
          "name": "Feb",
          "value": um2},{
          "name": "Tot",
          "value": um3}];


        var title = "Umsatz";

        var colorPicker = ["#000000", "#356307", "#00783b", "#008c45", "#009f4f", "#6aae6a"];

        var dataset =umsatz;
        var max = d3.max(dataset, function(d){ return d.value; });
        var currency = "CHF";
        var dest = "#rightLowerGraph";

        // add the title
        var h4 = document.createElement('h4');
        h4.innerText = title;
        document.querySelector(dest).append(h4);

        // Loop through the elements and render those
        for(var i = 0, ln = dataset.length; i < ln; i++) {
        // Captions first
        var div = document.createElement('div');
        div.className = "col-xs-12";
        // left part
        var left = document.createElement("span");
        left.innerText = dataset[i].name+":";
        div.append(left);
        // right part
        var pickedColor = colorPicker[Math.round((dataset[i].value/max)*(colorPicker.length-1))];
        var right = document.createElement("span");
        right.style.float = "right";
        right.innerHTML = currency + " " + "<span style='color:"+pickedColor+"'>"+dataset[i].value+"</span>";
        div.append(right);
        // append
        document.querySelector(dest).append(div);
        // Make an SVG Container
        var svg = d3.select(dest).append("svg")
                                            .attr("width", "100%")
                                            .attr("height", 22);
        // Draw the Rectangle
        var rectangle = svg.append("rect")
                                    .attr("x", 0)
                                    .attr("y", 0)
                                    .attr("rx", 10)
                                    .attr("ry", 30)
                                    .attr("width", (100*dataset[i].value/max)+"%")
                                    .attr("height", 22)
                                    .attr("fill", pickedColor);
        //
        document.querySelector(dest).append(document.createElement("br"));


        }


  }

perfbud 是2个Radical图的对象数据。

umsatz 是来自1个线性图表的对象数据。

第二次传递数据时的准确性创建4个Radical和2个线性图表。第3次6和3次。

更新： 这是我的解决方案，直到现在。但问题是它最初没有显示出来。可能是我没有更新它。当我刷新那个组件时，它正在显示。

我错过观看选项？以及我现在如何组织它？顺便说一下，我也在模板中获得更新价值。

<script>
import {bus} from '../bus'
export default {

  props:['values'],
  name: 'perf-graph',
  data () {
    return {
      title: 'PerfChart',
      radical1:'',
      perfbud: this.values,
      ggg:'',t:''
    }
  },
  methods: {
    buildOptions:function(up){
      var res = up;
      console.log('response');


  }
},
    created: function () {
    this.buildOptions();
    },
  mounted: function () {
    // bus.$on('lastdata',this.buildOptions);
console.log(this.value);
console.log('from perf',this.perfbud[0]);
    this.radical1 = new RadialProgressChart(this.$el, {
      diameter: 42,
      stroke: {
      width: 24,
      gap: 14
      },
      animation: {
      duration: -1,
      delay: -1
      },
      series:this.value[0]
  });

    },
  watch:{
  values:function(nv){
      // console.log('test', this.buildOptions);
    // this.radical1.update(nv);
  }
}
}
</script>

<template id="perf-graph">
  <div>{{values}}</div>

</template>

和图书馆我们需要什么 https://github.com/pablomolnar/radial-progress-chart 我正在关注这个项目。

Answer 1

您可以为您使用的图形插件创建可重用的组件。下面给出了这种方法的一个例子，请记住，这段代码只是你构建的起点，因此并不完美但有效。

Vue组件：

var radialGraph=Vue.component("radial-graph",{
    props:["settings","values"],
  template:"#radial-graph",
    mounted:function(){
        this.__instance=new RadialProgressChart(this.$el, this.buildOptions());
    },
  methods:{
    buildOptions:function(){
        var settings=this.settings||[];
      var me=this;
      settings.series.forEach(function(itm,indx){
            itm.value=me.values[indx]||0;
      });
      return settings;
    }
  },
  watch:{
    values:function(nv){
        if(!this.__instance)
        return;

        this.__instance.update(nv);
    }
  }
});

组件模板：

<template id="radial-graph">
  <div></div>
</template>

然后，在您的应用中，您可以使用下面一行中的组件

（请参阅radial-graph标记）：

Vue App：

var app=new Vue({
el:"#app",
data:{
 values:[10,20],
 settings:{diameter: 10,series:[{color:"green"},{color:"blue"}]}
},
mounted:function(){
    var me=this;
    setInterval(function(){
    var arr=[];
    me.values.forEach(function(){
        arr.push(Math.floor(Math.random() * (100 - 5)));
    });
    me.values=arr;
  },2000);
}
});

Vue App Template：

<div id="app">
  Graph Display
  <div>
    <radial-graph v-bind:settings="settings" v-bind:values="values"></radial-graph>
  </div>
</div>

工作小提琴是available here

如何在Vue js模板中覆盖新的Dom元素？

1 个答案: