如何以角度删除图表的水平线及其轴线？答案

【问题标题】：How to remove the horizontal lines of chart & its axis lines in angular?如何以角度删除图表的水平线及其轴线？
【发布时间】：2020-10-16 19:39:32
【问题描述】：

以下是一个带有由顶点图表组成的图形的角度应用程序

https://codesandbox.io/s/apx-column-distributed-d3ns7?from-embed

如何删除该图表的水平线及其轴线（这样看起来更清晰）

    this.chartOptions = {
      series: [
        {
          name: "distibuted",
          data: [21, 22,]
        }
      ],
      chart: {
        height: 350,
        type: "bar",
        events: {
          click: function(chart, w, e) {
            // console.log(chart, w, e)
          }
        }
      },
      colors: [
        "#008FFB",
        "#00E396",
      ],
      plotOptions: {
        bar: {
          columnWidth: "45%",
          distributed: true
        }
      },
      dataLabels: {
        enabled: false
      },
      legend: {
        show: false
      },
      xaxis: {
        categories: [
          ["John", "Doe"],
          ["Joe", "Smith"],
        ],
        labels: {
          style: {
            colors: [
              "#008FFB",
              "#00E396",
            ],
            fontSize: "12px"
          }
        }
      }
    };

& 还有如何格式化工具提示颜色？

【问题讨论】：

看看这个链接apexcharts.com/docs/options/tooltip

标签： apexcharts

【解决方案1】：

在您的配置中添加axisBorder 和axisTicks 配置，但我找不到如何完全删除水平条。如果我找到它，我会回来的。

xaxis
  categories: [
    ["John", "Doe"],
    ["Joe", "Smith"],
  ],
  axisBorder: {
    show: false
  },
  axisTicks: {
    show: false,
  },

【讨论】：

【解决方案2】：

网格线可以通过以下方式隐藏。

grid: {
    show: false
}

或

grid: {
    xaxis: {
        lines: {
            show: false
        }
    },   
    yaxis: {
        lines: {
            show: false
        }
    }
}

编辑：在你的例子中，你错过了

  <apx-chart
    [grid]="chartOptions.grid"
  ></apx-chart>

【讨论】：

【解决方案3】：

现在你可以使用这个选项了

chartOptions: {
    chart: {
      id: "basic-bar",
    },
    grid: {
      show: true,      // you can either change hear to disable all grids
      xaxis: {
        lines: {
          show: true  //or just here to disable only x axis grids
         }
       },  
      yaxis: {
        lines: { 
          show: true  //or just here to disable only y axis
         }
       },   
    },
  }

更多详情，您可以使用this reference

【讨论】：