HighCharts - 显示xaxis标题

我正在使用highcharts，但首先让我解释一下。图表需要这些项目/选项 - 每个条应该有它自己的宽度（完成）
- 每个条应该有它自己的颜色（完成）
- 与avarage水平（完成）
HighCharts - 显示xaxis标题

一个线然而，有一件事我不能工作：在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/

来源

2015-10-15 Mike van Hoof

在您的代码钻取id中，但没有向下钻取sereis，您真的需要深入钻取系列还是错误地进行了深入钻取？ –

我需要向下钻取，只能将其删除，因为它与此问题无关 –

我会使用下面的答案之一。只有一件事是缺少'plotOptions.column.grouping = false'，请参阅：http://jsfiddle.net/xkjqtcq3/2/;） –

您不必使用零填充数据，也不用零填充数据，但您可以简单地在点上提供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中导致错误< 9。

来源

2015-10-20 16:28:23

您需要更改系列数据格式是这样的。由于您使用的是多个系列，因此您应该为每个系列设置映射类别值（此处为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，希望这会有所帮助。

来源

2015-10-15 20:24:45 Nimmy

嗨Nimmy，与上面Perdo的回答一样：我的确也尝试过这种方式。这个解决方案的东西是酒吧没有居中。第一个酒吧左对齐，第二个在中间，第三个在右边。 –

嗨，你能检查是否这是你想要的吗？

我改变了你的序列数据，以这样的：

{ 
    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为您的答案。

来源

2015-10-15 21:22:03 RageAgainstTheMachine

感谢您的这一点，我确实也尝试过这种方式。这个解决方案的东西是酒吧没有居中。第一个酒吧左对齐，第二个在中间，第三个在右边。 –

HighCharts - 显示xaxis标题

回答

相关问题