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属性中，第一个值是第一列中的apples。如果更改第二个值，您将在第二列中获得苹果，依此类推。在这个fiddle中，你在所有列中都有苹果。

以下是您的答案的更新fiddle。

Answer 2

您需要更改此类的系列数据格式。由于您使用的是多个系列，因此每个系列都应具有映射类别值（此处为null），以显示相应的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]
    }]

这是更新的Fiddle，希望这有帮助。

Answer 3

您不必使用空值填充数据，也不必使用零填充数据，但您只需提供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>',
    },
}],

现在，正如我之前所说，禁用列的分组：

plotOptions: {
  column: {
    grouping: false
  }
}

工作演示：http://jsfiddle.net/xkjqtcq3/3/

额外注意事项：

你的代码中有很多额外的逗号，只要知道它会导致IE中的错误＆lt; 9。

HighCharts - 显示xaxis标题

3 个答案: