Javascript HighCharts-显示xaxis标题

我正在使用海图，但首先让我解释一下。 图表需要这些项目/选项 -每个条都应有自己的宽度（完成）
-每个条都应该有自己的颜色（完成）
-具有平均级别的行（完成）

然而，有一件事我不能做：在xaxis上，我需要条的名称（如这里：）

我尝试过不同的方法，如果我使用方法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>',
        },
    }],
});

$（函数（）{
//创建图表
$（“#容器”）。高图({
图表：{
键入：“列”，
},
学分：{
启用：false，
},
标题：{
文本：“”
},
xAxis：{
类型：'类别'，
标题：{
文本：'Kerntake'，
},
标签：{
启用：对，
},
类别：[‘苹果’、‘香蕉’、‘橙子’]
},
亚克斯：[{
标题：{
文字：“双子座niveau”，
},
allowDecimals:false，
绘图线：[{
颜色：'黑色'，
值：“2”，//在此处插入平均值
宽度：“1”，
zIndex:5，//为了不卡在常规打印线下
标签：{
文字：“双子座niveau”，
对齐：“右”，
y:12，
x:0
}
}],
},{
标题：{
文本：“”
},
allowDecimals:false，
},{
标题：{
文本：“”
},
allowDecimals:false，
},{
标题：{
文本：“”，
},
相反：是的，
}],
图例：{
已启用：false
},
工具提示：{
pointFormat:“{point.y:.2f}
”，
},
系列：[{
姓名：“Kerntake”，
colorByPoint：对，
颜色：[“c8173c”、“f2d38d”、“e2584d”、“6f2236”、“4e787a”、“867e97”、“000000”]，
点宽：20，
数据：[{
姓名：“建议人”，
y:3.2，
向下钻取：“建议”，
}],
}, {
姓名：“Kerntake”，
colorByPoint：对，
颜色：[“f2d38d”、“e2584d”、“6f2236”、“4e787a”、“867e97”、“000000”]，
点宽度：50，
数据：[{
姓名：“Analyseren”，
y:1.5，
向下钻取：“Analyseren”，
}]
}, {
姓名：“Kerntake”，
colorByPoint：对，
颜色：[“e2584d”、“6f2236”、“4e787a”、“867e97”、“000000”]，
点宽：30，
数据：[{
名称：“组织者”，
y:3.9，
向下钻取：“组织者”，
}]
}, {
名称：'CP niveau'，
类型：“样条线”，
数据：[2]，
工具提示：{
标题：“Gemdedeld niveau
”，
},
}],
});

---

到目前为止，我一直在修改我的代码：

您需要像这样更改序列数据格式。由于您使用的是多个序列，您应该为每个序列设置映射类别值（此处为空），以显示相应的x轴标签

  series: [{
        name: "Kerntaken",
        pointWidth: 20,
        data: [3.2,null,null]
    }, {
        name: "Kerntaken",
        pointWidth: 50,
        data: [null,1.5,null]
    }, {
        name: "Kerntaken",
        pointWidth: 30,
        data: [null,null,3.9]
    }]

这是最新的，希望有帮助。

嗨，你能看看你想要的是不是这个吗

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

{
    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]
}

您给了

数据一个对象，但它需要一个数组。我在值中设置了0，以平衡其他列中的集合

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

以下是更新后的答案。
您不必用空值填充数据，也不必用零填充数据，但您可以简单地在点中提供
x
索引。我不确定这是否真的适合向下钻取（和分类轴）的用例，但可能足够了：

数据示例：

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

和工作演示：

额外说明：

您的代码中有很多额外的逗号，请注意它会导致IE<9中出现错误。
在您的代码中有深入的id，但没有深入的序列，您真的需要深入系列还是错误地放置了深入？我需要深入，只是删除了它，因为它与此问题无关。我将使用下面的一个答案。仅此而已缺少东西
plotOptions.column.grouping=false
，请参阅：；）谢谢Pawel，这就是解决办法！要为它创造一个答案，让我接受这个答案，或者我接受下面的答案吗？）：PaWe FUS，谢谢PaWel.我正在寻找SAM.谢谢，我确实也尝试过这样的方法.这个解决方案的问题是，条不是中心的.第一条是左对齐的，第二条是中间的.右边的第三个。嗨，Nimmy，和Peldo:上面的答案一样：我也确实尝试过这个方法。这个解决方案的问题是，条不是中心的。第一条是左对齐的，第二条是中间的，右边是第三条。
plotOptions: {
  column: {
    grouping: false
  }
}