5

我必须使用在列和 Y 轴之间有 1px 空间的 highcharts 做一个柱形图，我怎样才能将我想要的图表中的 1px 空间添加到我做的图表中，这些是我做的代码：（对不起，我没有足够的声誉来添加图像，这就是我当时没有发布的原因）

var data = [ 20, 29, 25, 29, 21, 17, 20, 19, 18]; 
createMeasuresGraph(data, "quintals-sugar-graph");
function createMeasuresGraph(data, container) {
    data[0] = { color: '#55B647', y: data[0] };
    data[data.length -2 ] = { color: '#F15B49', y: data[data.length -2 ] };
    var chart = new Highcharts.Chart({
        chart: {
            marginBottom: 1,
            marginLeft: 0,
            marginRight: 0,
            marginTop: 0,
            renderTo: container,
            type: 'column',
        },
        credits: {
            enabled: false
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            column: {
                pointWidth: 5,
            },
            series: {
                borderWidth: .1,

            }
        },
        series: [{
            data: data,
            color: '#95D2F3',
            shadow: false,
        }],
        title: {
            text: ''
        },
        tooltip: {
            enabled: false
        },
        xAxis: {
            labels: {
                enabled: false
            },
            title: {
                enabled: false
            },
            lineColor: '#CBCBCB',
            tickWidth: 0
        },
        yAxis: {
            endOnTick: false,
            gridLineWidth: 0,
            labels: {
                enabled: false
            },
            startOnTick: false,
            minPadding: 0.5,
            title: {
                text: ""
            }
        }
    });
}

我还看到所有列之间的空间都不相同，也许我使用了错误的方法来获取空间，最好的方法是什么？

4

3 回答 3

13

你想要每列之间有 1px 的空间吗？

我会根据绘图的大小/列数计算列宽：

var colWidth = ($('#quintals-sugar-graph').width() / data.length) + 1;

然后将“borderWidth”设置为 1px 以提供空间：

    plotOptions: {
        column: {
            pointWidth: colWidth,
            borderWidth: 1
        },

    },

在这里拉小提琴。

在此处输入图像描述

于 2012-09-03T21:00:22.057 回答
4

你真的需要宽度正好是 1px 吗？如果没有，以下内容也会在列之间留下最小空间，并且会更方便：

plotOptions: {
    column: {
        pointPadding: 0,
        groupPadding: 0
    }
}
于 2013-05-16T12:45:10.480 回答
2

你可以简单地做：

plotOptions: {
  column: {
    pointPadding: 0,
    groupPadding: 0,
    borderWidth: 1
  }
},
于 2014-07-22T16:59:10.170 回答