javascript - HighCharts - 显示 xaxis 标题

Question

我正在使用 highcharts，但首先让我解释一下。该图需要这些项目/选项 - 每个栏应该有自己的宽度(完成)
- 每个条形应该有自己的颜色(完成)
- 平均水平线(完成)

但是，有一件事我无法完成:在 x 轴上需要条形的名称(如下所示: http://www.highcharts.com/demo/column-rotated-labels )。

我尝试了不同的方法，如果我使用方法 1，我无法设置自定义栏宽度，如果我使用方法 2，我无法设置 x 轴上的标题。有人有想法吗？

到目前为止我的代码:

$(function () {
// Create the chart
$('#container').highcharts({
    chart: {
        type: 'column',
    },
    credits: {
        enabled: false,
    },
    title: {
        text: ''
    },
    xAxis: {
        type: 'category',
        title: {
            text: 'Kerntaken',
        },
        labels: {
            enabled: true,  
        },
        categories: ['Apples', 'Bananas', 'Oranges']
    },
    yAxis: [{
        title: {
            text: 'Gemiddeld niveau',
        },
        allowDecimals: false,
        plotLines: [{
            color: 'black',
            value: '2', // Insert your average here
            width: '1',
            zIndex: 5, // To not get stuck below the regular plot lines
            label: {
                text: 'gemiddeld niveau',
                align: 'right',
                y: 12,
                x: 0
            }
        }],
    },{
        title: {
            text: ''
        },
        allowDecimals: false,
    },{
        title: {
            text: ''
        },
        allowDecimals: false,
    },{
        title: {
            text: '',
        },
        opposite: true,
    }],
    legend: {
        enabled: false
    },

    tooltip: {
        pointFormat: '<b>{point.y:.2f}</b><br/>',
    },

    series: [{
        name: "Kerntaken",
        colorByPoint: true,
        colors: ['#c8173c', '#f2d38d', '#e2584d', '#6f2236', '#4e787a', '#867e97', '#000000'],
        pointWidth: 20,
        data: [{
            name: "Adviseren",
            y: 3.2,
            drilldown: "Adviseren",
        }],
    }, {
        name: "Kerntaken",
        colorByPoint: true,
        colors: ['#f2d38d', '#e2584d', '#6f2236', '#4e787a', '#867e97', '#000000'],
        pointWidth: 50,
        data: [{
            name: "Analyseren",
            y: 1.5,
            drilldown: "Analyseren",
        }]
    }, {
        name: "Kerntaken",
        colorByPoint: true,
        colors: ['#e2584d', '#6f2236', '#4e787a', '#867e97', '#000000'],
        pointWidth: 30,
        data: [{
            name: "Organiseren",
            y: 3.9,
            drilldown: "Organiseren",
        }]
    }, {
        name: 'CP niveau',
        type: 'spline',
        data: [2],
        tooltip: {
            headerFormat: 'gemiddeld niveau<br>',
        },
    }],
});

到目前为止我对代码的修改:https://jsfiddle.net/Mik3yZ/L181kpqt/2/

Answer 1

您好，您能检查一下是不是您想要的吗？

我将您的系列数据更改为:

{
    name: "Apples",
    colorByPoint: true,
    colors: ['#c8173c', '#f2d38d', '#e2584d', '#6f2236', '#4e787a', '#867e97', '#000000'],
    pointWidth: 20,
    data: [3.2, 0, 0],
}, {
    name: "Bananas",
    colorByPoint: true,
    colors: ['#f2d38d', '#e2584d', '#6f2236', '#4e787a', '#867e97', '#000000'],
    pointWidth: 50,
    data: [0, 1.5, 0]
}, {
    name: "Oranges",
    colorByPoint: true,
    colors: ['#e2584d', '#6f2236', '#4e787a', '#867e97', '#000000'],
    pointWidth: 30,
    data: [0, 0, 3.9]
}

您为 data 提供了一个对象，但它需要一个数组。我在值中设置 0 以平衡其他列中的设置。

在第一个对象data 属性中，第一个值适用于第一列中的苹果。如果更改第二个值，您将在第二列中得到苹果，依此类推。在此fiddle所有列中都有苹果。

这是更新后的fiddle为您解答。