Question

我正在使用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>

为了说明问题，我每次按下按钮时都会向图表添加一系列数据，当前数据位于左侧。我想为每列使用相同的颜色，并且只是使用一行来划分条形中的空格。但是，列堆栈似乎非常轻微错位，我不确定原因。

enter image description here

编辑：我已经将link包含在一个小提琴中，但奇怪的是这里不存在这个问题。

Answer 1

如果边框出现问题，您可能需要尝试使用1px高度的背景图像来显示条形图之间的分隔。我知道这不是理想的情况，但最终它可能会解决问题。

堆积的列没有与highcharts排队

1 个答案: