Блог

Я пытаюсь составить эту диаграмму, используя Highchart.js. Теперь я должен добавить ярлыки в формате, показанном на следующем рисунке. Кто-нибудь может мне помочь, пожалуйста. Я использую ASP.net MVC и jquery для этого.

Вид такой

   <div id="hourlyChart"></div>
 

И файл JS является

 Highcharts.chart('hourlyChart', {
    chart: {
        type: 'column'
    },
    credits: false,
    title: {
        text: ''
    },
    legend: { enabled: false },
    xAxis: {
        categories: label
    },
    yAxis: [{
        min: 0,
        title: {
            text: ''
        }
    }],
    legend: {
        shadow: false
    },
    tooltip: {
        shared: true
    },
    plotOptions: {
        column: {
            grouping: false,
            shadow: false,
            borderWidth: 0
        }
    },
    series: [{
        name: 'Target',
        color: 'rgba(189, 195, 199, 1)',
        data: target,
        showInLegend: false,
    }, {
        name: 'Achieved',
        color: 'rgb(242, 38, 19)',
        data: achieved,
        pointPadding: 0.2,
        showInLegend: false          
    }
    ]
});
 

Из этого я получаю такой большой результат

Заранее спасибо.

Используйте метки данных и располагайте их по y свойствам. Пример:

     plotOptions: {
        column: {
            ...,
            dataLabels: {
                verticalAlign: 'bottom',
                allowOverlap: true,
                enabled: true,
                inside: true
            },
        }
    },
    series: [{
        dataLabels: {
            color: 'rgba(189, 195, 199, 1)',
            y: -310
        },
        ...
    }, {
        dataLabels: {
            color: 'rgb(242, 38, 19)',
            y: -330
        },
        ...
    }]
 

Живая демонстрация: http://jsfiddle.net/Черная метка/hvxbpqj5/

Ссылка на API: https://api.highcharts.com/highcharts/series.column.Метки данных