如何删除此图表周围的填充物?

时间:2019-11-06 18:50:22

标签: javascript vue.js apexcharts

当我在数据系列中同时使用x和y时,无法删除图表周围的填充。

请参考以下工作密码笔:

https://codepen.io/bmecler/pen/oNNdXjQ

然后在这里我修改导致填充的数据系列:

https://codepen.io/bmecler/pen/Jjjvomp

我尝试添加以下选项:

      xaxis: {
            x: 0,
            offsetX: 0,
            offsetY: 0,
            padding: {
            left: 0,
            right: 0
        },
          },

代码:

HTML:

<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div class="container">
      <vue-apex-charts
        type="area"
        :options="chartOptions"
        :series="series">
      </vue-apex-charts>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue-apexcharts"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</body>
</html>

CSS:

.container {
  background-color: #eee;
  width: 25%;
}

JS:

new Vue({
    el: "#app",
  data() {
    return {
                chartOptions: {
                    grid: {
                        show: false,
                padding: {
                    left: 0,
                  right: 0
                }
               },


                    chart: {
                        toolbar: {
                            show: false,
                        },
                sparkline: {
                    enabled: true
                }
                    },
                    dataLabels: {
                        enabled: false
                    },
                    stroke: {
                        curve: 'smooth'
                    },
                    xaxis: {
                        type: 'numeric',
                            lines: {
                                show: false,
                            },
                  axisBorder: {
                    show: false,
                  },

                         labels: {
                            show: false,
                        },
                    },
                    yaxis: [{
                        y: 0,
                        offsetX: 0,
                        offsetY: 0,
                        padding: {
                            left: 0,
                            right: 0
                        },
                    }],
                    tooltip: {
                        x: {
                            show: true,
                            format: 'dd/MM/yy HH:mm'
                        },
                    },
            },  
                series: [{
          name: 'series1',
          data: [{"x":"Mon","y":"31"}, {"x":"Tues","y":"41"}]
        }],
    }
  },
  components: {
    VueApexCharts
  }
})

0 个答案:

没有答案