Question

我只想在xAxis上居中放置列，是否可以这样做？这是我的图表图表

该列似乎总是在刻度线上开始，我只想在2个刻度之间显示该列。

   Highcharts.chart('YearNS', {
        chart: {
            width: 1200,
            height: 450,
           type: 'column',
            events: {
                click: function (e) {
                    console.log(e.type, this.name);

            },
            }
        },
        exporting: {
            enabled: false
        },
        title: {
            text: 'This Year NS vs Last 4 Years'
        },
        subtitle: {
            text: 'Click the columns to view the breakdown by Term. Click again to view by Program. Updated as of ' + MyUpdateDate
        },
        credits: {
            enabled: false
        },
        xAxis: {
            min: 0,
            max: 4,

            categories: categories
        },
        yAxis: {
            title: {
                text: "Number of Students"
            }
        },
        legend: {
            enabled: true,
            align: 'center',
            layout: 'horizontal',
            verticalAlign: 'top',

            floating: false,
            borderWidth: 1,
            backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
            shadow: true
        },
        plotOptions: {
            series: {

                point: {
                    events: {
                        click: function () {

                            ParamYear = this.category
                             var res = ParamYear.substring(0, 4);
                          // let urlParams = new URLSearchParams('=');
                            window.location = "http://localhost:37590/NewStudentReportTerm?ParYear="  + res

                        }
                    }
                },
                borderWidth: 1,
                pointWidth: 150,
                dataLabels: {
                    //inside: true,
                    overflow: 'none',
                    crop: false,
                    enabled: true,
                    format: '{point.y:,.0f}',
                    style: {
                        textShadow: false,
                        textOutline: false,
                        color: 'black'
                    },
                }
            },

            column: {
                events: {

                }
            },
        },
        series: series,
        drilldown: {
            series: {
                chartDrilldownData
            }
        }
    });

我希望每年的中心在这些行之间显示该列。那有可能吗？

谢谢！修改

这是我的Json数据。

  [
{
    "New_Students": "321",
    "NSYEAR": "2014",
    "NSterm": null,
    "NStermCat": null,
    "NSCareer": null,
    "NSProgDescr": null,
    "NSStudent": null
},
{
    "New_Students": "1923",
    "NSYEAR": "2015",
    "NSterm": null,
    "NStermCat": null,
    "NSCareer": null,
    "NSProgDescr": null,
    "NSStudent": null
},
{
    "New_Students": "293",
    "NSYEAR": "2016",
    "NSterm": null,
    "NStermCat": null,
    "NSCareer": null,
    "NSProgDescr": null,
    "NSStudent": null
},
{
    "New_Students": "29",
    "NSYEAR": "2017",
    "NSterm": null,
    "NStermCat": null,
    "NSCareer": null,
    "NSProgDescr": null,
    "NSStudent": null
},
{
    "New_Students": "524",
    "NSYEAR": "2018",
    "NSterm": null,
    "NStermCat": null,
    "NSCareer": null,
    "NSProgDescr": null,
    "NSStudent": null
}
    ]

Answer 1

您需要为grouping系列禁用column选项：

 plotOptions: {
     column: {
         grouping: false
     }
 }

实时演示：http://jsfiddle.net/BlackLabel/ow8vkq1f/

API参考：https://api.highcharts.com/highcharts/plotOptions.column.grouping

无论如何，将柱形图在xAxis上居中

1 个答案: