如何禁用apexcharts的下载选项?

时间:2019-01-04 01:58:49

标签: javascript vue.js apexcharts

我正在使用apexcharts vue bindings绘制一些条形图。

如文档所述,应该可以通过设置show:false来禁用工具栏,如there所示。

所以我在助手功能上做到了:

// do-char-options.js
const randomColor = require("randomcolor");
module.exports = labels => ({
  toolbar: { show:false },// docs says it should do the trick
  colors: randomColor({
    luminosity: "light",
    hue: "blue",
    count: 30
  }),
  plotOptions: {
    bar: { distributed: true, horizontal: true }
  },
  tooltip: {
    theme: "dark"
  },
  xaxis: {
    categories: labels,
    color: "white",
    labels: {
      style: {
        colors: ["white"]
      }
    }
  },
  yaxis: {
    labels: {
      style: {
        color: "white"
      }
    }
  }
});

然后我以这种方式将其传递给我的vue组件:

<template>
    <v-layout row justify-center wrap>
        <v-flex xs12>
            <apexchart type="bar" height="500" :options="chartOptions" :series="series"/>
        </v-flex>
    </v-layout>
</template>

<script>
const doOptions = require("./do-chart-options");
const labels = [
    "Javascript",
    "Java",
    "SQL",
    "HTML",
    "CSS",
    "C",
    "C++",
    "PHP",
    "Python",
    "GO",
    "Ruby"
];
module.exports = {
    name: "chart-languages",
    data: _ => ({
        series: [{ data: [160, 110, 90, 85, 80, 80, 60, 30, 15, 14, 9] }],
        chartOptions: doOptions(labels)
    })
};
</script>

但是菜单仍然存在:

enter image description here

欢迎任何指导。

3 个答案:

答案 0 :(得分:2)

toolbar应该在chart键下

{
  chart: {
    toolbar: {
      show: false
    }
  },
  colors: randomColor({
    luminosity: "light",
    hue: "blue",
    count: 30
  }),
  plotOptions: {
    bar: {
      distributed: true,
      horizontal: true
    }
  },
  ...
}

您可以查看我的演示here

答案 1 :(得分:0)

  chart: {
      toolbar: {
        show: true,
        tools:{
          download:false // <== line to add
        }
      }
    }

只能禁用下载选项,但工具栏存在

答案 2 :(得分:0)

编辑此行可能对您有所帮助

@Override
public void onDataChange(@NonNull DataSnapshot snapshot) {
                                                // ? loop over `key` level children
  for(DataSnapshot childSnapshot : snapshot.getChildren()) { 
                                                // ? loop over Attendance children
    for(DataSnapshot dataSnapshot : childSnapshot.child("Attendance").getChildren()){
      Report1 report1 = dataSnapshot.getValue(Report1.class);
      list.add(report1);
    }
  }

  myAdapter1.notifyDataSetChanged();
}

@Override
public void onCancelled(@NonNull DatabaseError databaseError) {
  throw databaseError.toException(); // ? never ignore errors
}