无论如何都要将柱形图集中在xAxis上

问题描述 投票:0回答:1

我只是想将列放在他们的xAxis上,无论如何要做到这一点?这是我的高级代码

它看起来总是在刻度线上开始,我只想显示2个刻度之间的列。

检查这个https://imgur.com/lvV006M

   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
}
    ]
javascript c# asp.net highcharts
1个回答
0
投票

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

 plotOptions: {
     column: {
         grouping: false
     }
 }

现场演示:http://jsfiddle.net/BlackLabel/ow8vkq1f/

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

© www.soinside.com 2019 - 2024. All rights reserved.