Я использую высокие графики для построения ряда данных.Однако у меня проблема с выравниванием рядов друг над другом, поскольку столбцы немного смещены.Мой код выглядит следующим образом:
<!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>
Чтобы проиллюстрировать проблему, я добавляю серию данных на график каждый раз, когда нажимается кнопка, а текущие данные находятся слева.Я хочу использовать один и тот же цвет для каждого столбца и просто разграничить пробелы в строке с помощью линии.Но стеки столбцов кажутся слегка смещенными, и я не уверен, почему.
РЕДАКТИРОВАТЬ: Я включил ссылка на скрипку, но, как ни странно, этой проблемы здесь не существует.