Question

我想在vue应用程序中使用c3.js，创建图表成功，但是无法更改c3图表轴颜色。

不仅仅是坐标轴颜色，我无法更改和修复的所有样式的c3图表，这对我来说都很沮丧。

你有什么想法吗？

<template>
    <div id="home">

        <div class="block1">
            <div id='lineChart'></div>
        </div>
    </div>

</template>
<script>

    import * as d3 from "d3";
    import c3 from 'c3';

    export default {
        mounted(){
            this.loadBlock1();
        },
        methods:{
            loadBlock1 () {
                let chart = c3.generate({
                    bindto:'#lineChart',
                    data: {
                        columns: [
                            ['data1', 30, 200, 100, 400, 150, 250],
                            ['data2', 50, 20, 10, 40, 15, 25]
                        ],

                    }
                });
            }
        }
    }
</script>
<style scoped>
    @import "https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.0/c3.min.css";

    #lineChar .c3-line-data2 {
        stroke-width: 5px;
    }
    #lineChart .c3-axis-x line,
    #lineChart .c3-axis-x path {
        stroke:blue;
    }
</style>

Answer 1

您的代码无法正常工作，因为当您使用<style scoped>时，Vue会模拟影子DOM，并在DOM元素和CSS选择器上添加哈希。 c3创建的元素不包含哈希，并且css选择器与此不匹配。因此，添加没有style属性的scoped标签来设置图表样式。

<template>...</template>
<script>...</script>
<style scoped>...</style>
<style>...</style>

此外，避免使用查询选择器获取DOM元素。 Vue使用VDOM方法，应该通过指令和引用来完成DOM访问：

Vue.directive("c3", {
  bind(el, binding, vnode) {
    const chart = c3.generate({
      bindto: el,
      data: binding.value,
    });

    el.chart = chart;
  },
  update(el, binding, vnode) {
    el.chart.resize();
  },
  unbind(el, binding, vnode) {
    el.chart.destroy();
  }
});

const home = new Vue({
  el: "#home",
  data() {
    return {
      options: {
        columns: [
          ["data1", 30, 200, 100, 400, 150, 250],
          ["data2", 50, 20, 10, 40, 15, 25]
        ],
      },
    };
  },
  computed: {
    chart() {
      return this.$refs.chart.chart;
    }
  },
  methods: {
    load(data) {
      this.chart.load(data);
    },
    unload(data) {
      this.chart.load(data);
    }
  },
  mounted() {
    this.chart.resize();
  }
});

setTimeout(() => {
  home.load({
    columns: [
      ['data1', 230, 190, 300, 500, 300, 400]
    ]
  });
}, 1000);

setTimeout(function() {
  home.load({
    columns: [
      ['data3', 130, 150, 200, 300, 200, 100]
    ]
  });
}, 1500);

setTimeout(function() {
  home.unload({
    ids: 'data1'
  });
}, 2000);

#home .c3-line-data2 {
  stroke-width: 5px;
}

#home .c3-axis-x line,
#home .c3-axis-x path {
  stroke: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.0/c3.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.0/c3.min.js"></script>

<div id="home">
  <div class="block1">
    <div ref="chart" v-c3="options"></div>
  </div>
</div>

如何在vue环境中更改c3图表轴颜色

1 个答案: