堆叠列未与高图表对齐
我正在使用 highcharts 绘制一系列数据。然而，我在将系列排列在彼此之上时遇到问题，因为列稍微未对齐。我的代码如下：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" ></script>
<script type="text/javascript" src="highcharts.js"></script>
<script type="text/javascript">
// global vars
col1 = '#7B7B7B';
col2 = '#FFFFFF';
// Set chart options
Highcharts.setOptions({
chart: { defaultSeriesType: 'column', backgroundColor: "rgba(0,0,0)" },
plotOptions: { column:{ stacking: 'normal' }},
title: { text: ''},
legend: {enabled: false}
});
// Initialize charts
function createCharts(){
chart1 = new Highcharts.Chart({
chart: { renderTo: 'chart-1' },
xAxis: { categories: ['now.', 'then.'] },
yAxis: { title: {style: {color: '#FFFFFF'},
text: '[Total Amount]' },
min: 0 },
series: [{name: 'Measure_A', data: [0, 0], pointWidth: 28},
{name: 'Measure_B', data: [0, 0], pointWidth: 28}]
});
}
// update charts
function updateCharts(){
old_A = chart1.series[0].data[0].y;
old_B = chart1.series[1].data[0].y;
A = Math.random() * 10;
B = Math.random() * 10;
chart1.series[0].setData([{color: col1, name: 'Measure_A', y: A, pointWidth: 28},
{color: col2, name: 'Measure_A', y: old_A, pointWidth: 28}]);
chart1.series[1].setData([{color: col1, name: 'Measure_B', y: B, pointWidth: 28},
{color: col2, name: 'Measure_B', y: old_B, pointWidth: 28}]);}
</script>
<body onload="createCharts();">
<div id="chart-1" style="width:250px; height:150px"></div>
<button type="button" id="button-1" onclick="updateCharts()">Update chart</button>
</body>
</html>
为了说明问题，每次按下按钮时我都会向图表添加一系列数据，当前数据位于左侧。我想为每一列使用相同的颜色，并且只是使用一条线来划分栏中的空格。但是，列堆栈似乎稍微未对齐，我不确定为什么。
编辑： 我已经包含了 链接到小提琴，但奇怪的是这里不存在这个问题。
I am using highcharts to plot to series of data. However, I'm having a problem lining up the series on top of each other as the columns are very slightly misaligned. My code is as follows:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" ></script>
<script type="text/javascript" src="highcharts.js"></script>
<script type="text/javascript">
// global vars
col1 = '#7B7B7B';
col2 = '#FFFFFF';
// Set chart options
Highcharts.setOptions({
chart: { defaultSeriesType: 'column', backgroundColor: "rgba(0,0,0)" },
plotOptions: { column:{ stacking: 'normal' }},
title: { text: ''},
legend: {enabled: false}
});
// Initialize charts
function createCharts(){
chart1 = new Highcharts.Chart({
chart: { renderTo: 'chart-1' },
xAxis: { categories: ['now.', 'then.'] },
yAxis: { title: {style: {color: '#FFFFFF'},
text: '[Total Amount]' },
min: 0 },
series: [{name: 'Measure_A', data: [0, 0], pointWidth: 28},
{name: 'Measure_B', data: [0, 0], pointWidth: 28}]
});
}
// update charts
function updateCharts(){
old_A = chart1.series[0].data[0].y;
old_B = chart1.series[1].data[0].y;
A = Math.random() * 10;
B = Math.random() * 10;
chart1.series[0].setData([{color: col1, name: 'Measure_A', y: A, pointWidth: 28},
{color: col2, name: 'Measure_A', y: old_A, pointWidth: 28}]);
chart1.series[1].setData([{color: col1, name: 'Measure_B', y: B, pointWidth: 28},
{color: col2, name: 'Measure_B', y: old_B, pointWidth: 28}]);}
</script>
<body onload="createCharts();">
<div id="chart-1" style="width:250px; height:150px"></div>
<button type="button" id="button-1" onclick="updateCharts()">Update chart</button>
</body>
</html>
To illustrate the problem I am adding a series of data to the chart each time the button is pressed, and the current data is on the left hand side. I want to use the same color for each column, and just to demarcate the spaces in the bar using a line. But, the column stacks appear to be very slightly misaligned and I'm not sure why.
EDIT: I've included a link to a fiddle, but strangely this problem does not exist here.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
如果边框出现问题，您可能需要尝试使用 1 像素高度的背景图像来显示条形之间的分隔。我知道这不是理想的情况，但最终它可能会解决问题。
If the borders are giving issues, you might want to try using a 1px height background image to show the seperation between the bars. I know it's not the ideal situation but eventually it might solve the issue after all.