Question

我正在使用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>

我在这里使用选项：{ 标题：{ 显示：true，文字：“自定义图表标题” } }，但是它不起作用并显示默认图例。代码中有一些（type（）{ this.showcommon =！this.showcommon }，）请忽略此。这是我在vue中使用图表的链接： I used exact according to this link in vue. but cannot update the default legend.

Answer 1

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

一种解决方案是使用File ../python3.6/site-packages/yaml/parser.py", line 439, in parse_block_mapping_key "expected <block end>, but found %r" % token.id, token.start_mark) yaml.parser.ParserError: while parsing a block mapping in "/temp/config.yml", line 5, column 3 expected <block end>, but found '<alias>' in "/temp/config.yml", line 6, column 18

JSON.parse(JSON.stringify())

Vue list rendering caveats

Answer 2

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

vue-chartjs在其文档Here

中指出了一些反应性问题

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

2 个答案: