Javascript Highchart 特定宽度堆栈柱形图

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6589718/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 22:23:53  来源:igfitidea点击:

Highchart specific width stack column bar graph

javascriptjquerygraphchartshighcharts

提问by G?ng Tian

Need to find a way to represent a graph with error bar, but it seems that it's not supporting in the highchartat the moment. My plan is to use a stack column bar chart with 0 to lower Y as transparent, and lower Y to upper Y with a red color or whatever I am gonna pick later.

需要找到一种方法来表示带有误差条的图形,但目前似乎不支持highchart。我的计划是使用堆栈柱形图,其中 0 将 Y 降低为透明,并将 Y 降低至 Y 上的颜色为红色或我稍后要选择的任何颜色。

My question is:

我的问题是:

Is it possible limit the stack column bar width to say 1px regardless the zoom level in highchart?

无论highchart中的缩放级别如何,是否可以将堆栈列栏宽度限制为1px?

Thanks for the input!

感谢您的输入!

回答by G?ng Tian

Just figured out this myself. pointWidth is the parameter to set the width for bar width. Also the walk around is nice for represent the error bar since there aren't any highly interactive javascript chart support this type of chart yet.

只是自己想通了这一点。pointWidth 是设置条形宽度的参数。走动也很适合表示错误栏,因为还没有任何高度交互的 javascript 图表支持这种类型的图表。

回答by test

series: [{
            name: strSeriesTitle,
            data: arrData,
            pointWidth: 28
        }]

回答by Rahul Gupta

A working DEMOfor setting width of column bars irrespective of the chart size.

无论图表大小如何,用于设置列条宽度的工作演示

You will have to use pointWidthoption like:

您将不得不使用以下pointWidth选项:

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        plotOptions: {
            series: {
                pointWidth: 40//width of the column bars irrespective of the chart size
            }
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    });
});

回答by epool

You should use the following options instead of pointWidthto be responsive and not fixed:

您应该使用以下选项而不是pointWidth响应式而不是固定:

plotOptions: {
    series: {
        pointPadding: 0, // Defaults to 0.1
        groupPadding: 0.01 // Defaults to 0.2
    }
},