1

我想显示 0 到 100% 之间的数据。条形图的宽度为 160 像素,我希望只看到没有任何标题/图例的条形图。我得到了介于 0 和 x 之间的数据(例如从 0 到 700),并且可以更改最大值。

当最大值小于 160 时,条形图看起来正确。但是当最大值超过 160 时,一个字符会错误地缩放当前条形值。

理想的结果

http://jsfiddle.net/dvasuta/H6SJE/2/

我现在拥有的 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 参数中的问题。但是如何设置图表宽度?

4

2 回答 2

2

我认为您需要尝试的参数是 y 轴上的“endOnTick”:

endOnTick:false,

http://jsfiddle.net/46nMs/

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

此外,您可能想要关闭导出(这只是视觉上的调整,不会影响栏的缩放)。

于 2013-03-26T08:34:19.513 回答
1

试试这个链接图表链接

1. Disabled exporting
2. borderWidth = 0
于 2013-03-26T08:27:28.763 回答