从 highchart 图形中删除轴线答案

【问题标题】：Remove axis line from highchart graphic从 highchart 图形中删除轴线
【发布时间】：2012-06-05 04:44:04
【问题描述】：

我有这张图表。我有一个网格，我想在该图的每一行中插入。问题是你可以看到左边有一条小线，这条线似乎是图形轴。我需要删除它不仅是因为视觉方面，还因为轴增加了网格单元格的高度。

提前致谢！

<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="container" style="min-width: 400px; height: 100px; margin: 0 auto"></div>
    
var chart;
$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            backgroundColor: null,
            renderTo: 'container',
            type: 'bar',
        },
        title: {
            text: ''
        },
        xAxis: {
            gridLineWidth: 0,
            enabled: false,
            categories: [''],
            labels: {
                enabled: false
            }
        },
        yAxis: {
            enabled: false,
            gridLineWidth: 0,
            lineWidth: 0,
            min: 0,
            title: {
                text: ''
            },
            labels: {
                enabled: false
            }
        },
        legend: {
            enabled: false,
        },
        tooltip: {
            formatter: function() {
                return ''+
                    this.series.name +': '+ this.y +'';
            }
        },
        credits: 
        {
            enabled: false,
            position: 
            {
                align: 'left',
                x: 10
            }
        },
        plotOptions: {
            series: {
                stacking: 'normal'
            }
        },
        series: [ {
            name: 'Clicks',
            data: [2]
        }, {
            name: 'Distributed Points',
            data: [3]
        }],
        exporting: 
        {
            enabled: false
        }
    });
});

【问题讨论】：

您是否尝试过将元素的呈现属性设置为 display:none; ?
我不明白您所说的渲染属性是什么意思。但是如果我在 html 中设置 display:none 我可以隐藏轴但组件高度保持不变（组件高度需要只是图形高度）。
哦，好的。这是我正在使用的 JSFiddle 来调查这个问题。 jsfiddle.net/JEGGf/1 SVG 渲染...我在 API 中还没有看到任何结果 highcharts.com/ref/#chart-object
您的解决方案是否需要使用高图表？
没有必要，但我认为这比通过 JavaScript '绘制'栏更好。

标签： c# javascript jquery highcharts

【解决方案1】：

Is this what you are after?

我设置xAxis lineWidth: 0 然后在绘制完图之后：

$('.highcharts-axis').css('display','none');

编辑：

如果您还设置了tickWidth: 0，您可以在不使用CSS调用的情况下移除所有轴线的痕迹。

修改小提琴here.

【讨论】：

我希望给蒂亚戈一个内置在 API 中的答案。样式表覆盖的问题在于，当 SVG 更新时，不能保证 css hack 会持续存在。此外，您发现自己在确保您的包装器在整个产品生命周期中正确地与第 3 方工具一起使用方面处于一个滑坡上。
正如 Christopher 所说，我正在寻找使用 API 的解决方案。
但是我看过你的例子。虽然轴已经消失，但 'svg' 元素保持相同的高度，在这种情况下，highcharts 也会增加单元格高度。
不确定单元格高度是什么意思。无论如何，如果您还设置了 tickWidth:0，那么您不需要 css hack 来删除轴线的所有痕迹。