1
ハイチャートを使用して一連のデータをプロットしています。しかし、列が非常にわずかにずれているので、シリーズの上に並んで問題があります。次のように私のコードは次のとおりです。スタックされた列がハイチャートで整列していない
<!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>
私はチャートにボタンが押されるたびに、一連のデータを追加していて、現在のデータが左側にある問題を説明するために。私は各列に同じ色を使用したいだけで、行を使ってバーのスペースを区切ります。しかし、列のスタックは非常にわずかにずれているように見えますが、なぜその理由がわかりません。
EDIT：私はバイオリンにlinkを含めましたが、妙にこの問題は、ここでは存在しません。
万が一動作しているフィドルを指摘できますか？ – malonso
@malonso私は1つを追加しましたが、問題を再現することはできません！ – djq
@celeniusはこれがすべてのブラウザで起こっていますか？ – Nobita