Highcharts柱+线组合图,包含多个系列.在柱上发布对齐线
Highcharts column + line combination chart with multiple series. Issue aligning line over the column
我有一个多系列柱状图(本例中为3)。我想在所有系列的列上叠加一条线。因此,我用相同的列序列数据创建了一个3行序列。当只有一个列和行系列时,这种方法非常有效。对于一个以上的系列,线条呈现在类别的中心,而不是显示在相应的列上(注意:向左移动线条会起作用,但我不知道怎么做)。
链接到JSFiddle:http://jsfiddle.net/Wm6dU/7/
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: "Column Line Combo"
},
xAxis: {
categories: [
"Cat 1",
"Cat 2",
"Cat 3"],
},
yAxis: {
title: {
text: 'USD'
}
},
series: [{
name: "Revenue",
data: [
49.9,
71.5,
106.4],
type: "column"
}, {
name: "Revenue",
data: [
49.9,
71.5,
106.4],
type: "line"
}, {
name: "Cost of goods sold",
data: [
83.6,
78.8,
98.5],
type: "column"
}, {
name: "Cost of goods sold",
data: [
83.6,
78.8,
98.5],
type: "line"
}, {
name: "Operating Expenses",
data: [
48.9,
38.8,
39.3],
type: "column"
}, {
name: "Operating Expenses",
data: [
48.9,
38.8,
39.3],
type: "line"
}]
});
});
谢谢。
设置这些行的x值怎么样?http://jsfiddle.net/qPqCW/
, {
name: "Revenue",
data: [
{x:-0.2, y:49},
{x:0.8, y:71.5},
{x:1.8, y:106.4}],
type: "line"
},
, {
name: "Operating Expenses",
data: [
{x:.2,y:48.9},
{x:1.2, y:38.8},
{x:2.2, y:39.3}],
type: "line"
}
为了计算X值,我查看了源代码。以下假设您使用的是groupPadding.2和pointPadding.1的默认值。我修改了getColumnMetrics函数以获得通用解决方案。以下是我的想法:
var columnMetrics = [];
for (j=0;j<index;j++) {
var categoryWidth = 1,
groupPadding = categoryWidth * .2,
groupWidth = categoryWidth - 2 * groupPadding,
pointOffsetWidth = groupWidth / index,
pointPadding = pointOffsetWidth * .1,
pointWidth = pointOffsetWidth - 2 * pointPadding,
colIndex = j,
pointXOffset = pointPadding + (groupPadding + colIndex *
pointOffsetWidth - (categoryWidth / 2));
columnMetrics.push( {
width: pointWidth,
offset: pointXOffset,
center: pointXOffset + (pointWidth /2.0)
});
}
var series = [];
for(i=0;i<index;i++) {
series.push({
name: "Column" + index,
data: [
49.9,
71.5,
106.4],
type: "column"
});
series.push({
name: "Line" + index,
data: [
{x:0 + columnMetrics[i].center, y:49},
{x:1 + columnMetrics[i].center, y:71.5},
{x:2 + columnMetrics[i].center, y:106.4}],
type: "line"
});
}
这显示了1到10系列的结果:http://jsfiddle.net/b8gS5/
相关文章:
- 将两个图形(饼图和条形图)并排对齐::d3-js
- jquery对话框内容仅针对第一个请求进行对齐
- ExtJS--如何居中对齐两个工具栏按钮
- 折线图:对齐多个数据集的x轴(时间戳)
- DataTables-FixedHeader-多个tr in the ad对齐问题
- 在 css 中对齐三个框
- 如何对齐视觉线和视觉框左侧
- 如何在页面上对齐两个附加的子项,JavaScript
- CSS:将三个按钮对齐成两行
- 高图表 - 如何将与刻度线对齐的类别定位为列之间的分隔
- 我将如何将 x 轴标签与它们在 HTML 中对应的刻度线对齐
- 快速对齐 2 个不同表中的行高
- Highcharts柱+线组合图,包含多个系列.在柱上发布对齐线
- select2.js-如何在选项元素内对齐两个项目
- 在图像和标尺之间对齐两个项目
- 如何在多个系列柱状图的列顶部对齐共享工具提示
- 对齐3个不同大小的分区
- 在谷歌地图信息窗口中对齐2个DIV's
- 以圆弧或半圆图案对齐多个D3圆
- 左对齐两个不同的文本字段,不使用列