Question

我想显示0到100％之间的数据。条形图有160px的宽度，我想看看没有任何标题/传说的酒吧。我得到0和x之间的数据范围（例如从0到700），并且可以更改最大值。

当最大值小于160时，条形图看起来正确。但是当最大值超过160时，chars会对当前的条形值进行不可估量的缩放。

理想的结果

我现在拥有的 http://jsfiddle.net/dvasuta/sXAeh/2/

$(function () {
    $('#container').highcharts({
        credits: {
            enabled: false,
        },
        chart: {
            renderTo: 'container',
            type: 'bar',
            marginBottom: 1,
            marginTop: 1,
            marginLeft: 1,
            marginRight: 1,
            borderRadius: 0,
            borderWidth: 1,
            borderColor: '#c5c6c7',
            backgroundColor: 0,
            height: 22,
            width:160
        },
        title: {
            text: null
        },
        xAxis: {
            tickWidth: 0,
            lineWidth: 0,
            gridLineWidth: 0,
            categories: 0,
            labels: {
                enabled: false
            }
        },
        yAxis: {
            tickWidth: 0,
            lineWidth: 0,
            gridLineWidth: 0,
            min: 0,
            max: 2500,
            title: {
                text: null
            },
            labels: {
                enabled: false
            }
        },
        tooltip: {
            enabled: false,
            formatter: function () {
                return '';
            }
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true,
                    formatter: function () {
                        return '';
                    },
                    y: 0,
                    x: 0,
                    color: '#ff0',
                    style: {
                        fontSize: '18px',
                        fontFamily: 'bold Helvetica,Arial,sans-serif'
                    }
                }
            },
            series: {
                allowPointSelect: false,
                enableMouseTracking: false,
                groupPadding: 0,
                pointPadding: 0,
                borderWidth: 0,
                borderRadius: 0
            }
        },
        series: [{
            shadow: true,
            data: [2482],
            color: {
                linearGradient: [20, 20, 0, 20],
                stops: [
                    [0, '#B6D22D'],
                    [1, '#5C9135']
                ]
            }
        }]
    });
});

似乎是chart.width参数中的问题。但是如何设置图表宽度？

Answer 1

我认为您需要尝试的参数是y轴上的'endOnTick'：

endOnTick:false,

http://jsfiddle.net/46nMs/

http://api.highcharts.com/highcharts#yAxis.endOnTick

此外，您可能想要转换导出（这只是一个视觉调整，并不影响条形图的缩放）。

Answer 2

尝试此LINK ChaRT LINK

1. Disabled exporting
2. borderWidth = 0

高图栏缩放

2 个答案: