图表js名称标签未在vuejs中更新

Posted 2023-03-07

【中文标题】图表js名称标签未在vuejs中更新

【英文标题】：chart js name label not updating in vuejs

【发布时间】：2018-12-14 08:02:02

【问题描述】：

我正在使用 Vue JS 并在我的单页应用程序中使用图表，但在更新 Legend 时遇到了麻烦，经过大量搜索和尝试，它不会更新。请帮我纠正我的代码。 这是我的代码。

<script>
export default 
  name: 'Home',
  data: function data() 
  return 
      labels: [20181127, 20181126, 20181123, 20181122, 20181121, 20181120, 20181119, 20181116, 20181115, 20181114, 20181113, 20181112, 20181109, 20181108, 20181107, 20181106, 20181105, 20181102, 20181101, 20181031, 20181030, 20181029],
      dataset: [4220, 4260, 4380, 4390, 3420, 4570, 4600, 2630, 4650, 4670, 4370, 4670, 4730, 4730, 4730, 4770, 4370, 4770, 4580, 4780, 4980, 4780],
      rebar: [5220, 4260, 4380, 400, 4420, 4570, 4600, 4630, 2000, 4670, 4370, 4670, 4730, 4730, 3000, 4770, 4370, 4770, 4580, 4780, 4980, 4780],
      carbon: [3960, 4060, 4110, 4140, 4160, 4200, 4250, 4290, 4340, 4340, 4360, 4400, 4410, 4430, 4430, 4460, 4490, 4490, 4510, 4510, 4540, 4540],
      round: [5350, 5350, 5350, 5350, 5450, 5450, 5450, 5450, 5450, 5450, 5450, 5450, 5450, 5450, 5450, 5450, 5450, 5450, 5550, 5550, 5550, 5550],
      cold: [4220, 4260, 4380, 4390, 4420, 4570, 4600, 4630, 4650, 4670, 4670, 4670, 4730, 4730, 4730, 4770, 4770, 4770, 4780, 4780, 4780, 4780],
      color: [7500, 7550, 7550, 7550, 7550, 4550, 7600, 7600, 7700, 7700, 6000, 7700, 7700, 7700, 7700, 7700, 7700, 7700, 7650, 7650, 7650, 7650],
      galvanized: [4380, 4400, 4460, 4500, 4540, 4570, 4580, 4600, 4600, 4620, 4670, 4680, 4790, 4790, 4800, 4860, 4880, 4880, 4880, 4900, 4930, 4930],
      HRC: [3630, 3670, 3790, 3820, 3820, 3860, 3860, 3880, 3860, 3860, 3870, 3870, 3950, 3970, 4040, 4120, 4130, 4130, 4130, 4190, 4250, 4250],
      wirerod: [3970, 4040, 4190, 4300, 4300, 4470, 4580, 4680, 4700, 4720, 4730, 4790, 4870, 4870, 4920, 4960, 4980, 4990, 4990, 4990, 4990, 4990],
      options: 
        title: 
            display: true,
            text: 'Custom Chart Title'
        
      ,
      showcommon:false,
      showrebar: false,
      showcarbon: false,
      showround: false,
      showcold: false,
      showcolor: false,
      showGalvanized: false,
      showHRC: false,
      showWire: false
      ;
  ,
 
  methods: 
    addData: function addData() 
      this.dataset.push(this.dataentry);
      this.labels.push(this.datalabel);
      this.datalabel = 'bhumi';
      this.dataentry = '';
      this.roundentry = '';
      this.carbon = '';
      this.HRC = '';
      this.legend = legend;
    ,
    type () 
      this.showcommon = !this.showcommon
    ,
    type1 () 
      this.showrebar = !this.showrebar
    ,
    type2 () 
      this.showcarbon = !this.showcarbon
    ,
    type3 () 
      this.showround = !this.showround
    ,
    type4 () 
      this.showcold = !this.showcold
    ,
    type5 () 
      this.showcolor = !this.showcolor
    ,
    type6 () 
      this.showGalvanized = !this.showGalvanized
    ,
    type7 () 
      this.showHRC = !this.showHRC
    ,
    type8 () 
      this.showWire = !this.showWire
    
  
  
</script>

<b-row>
                        <b-col>
                          <chartjs-line :labels="labels" :data="carbon" :bind="true"></chartjs-line>
                        </b-col>
                        <b-col>
                          <chartjs-line :labels="labels" :data="rebar" :bind="true"></chartjs-line>                
                        </b-col>
                    </b-row>

我在这里使用 选项： 标题： 显示：真， text: '自定义图表标题' , 但它不起作用并显示默认图例。在代码中有一些 (type () this.showcommon = !this.showcommon ,) 请忽略这个。 这是我在 vue 中使用图表的链接： I used exact according to this link in vue. but cannot update the default legend.

【参考方案1】：

这是一个常见的 Vue 反应性问题。您需要进行深层复制以使数据具有反应性。

一种解决方案是使用JSON.parse(JSON.stringify())

addData: function addData() 
  this.dataset.push(this.dataentry);
  this.labels.push(this.datalabel);
  this.labels = JSON.parse(JSON.stringify(this.labels))
  this.dataset = JSON.parse(JSON.stringify(this.dataset))
  this.datalabel = 'bhumi';
  this.dataentry = '';
  this.roundentry = '';
  this.carbon = '';
  this.HRC = '';
  this.legend = legend;

Vue list rendering caveats

【参考方案2】：

如果您不使用vue-chartjs，我会推荐它，它可以为您处理反应性并且功能非常齐全。

vue-chartjs 在其文档 Here 中指出了一些反应性问题