Question

我正在使用Google Chart API，主要是Combo Chart在同一图表区域中显示不同的数据。当我单独使用CandleStick时它看起来很好： candlestick only

然而，当我添加另一个酒吧系列时，它会导致轻微的移动，现在蜡烛看起来都搞砸了。 candlestick with bar

似乎左垂直轴的宽度导致这种轻微的偏移。问题是，我需要显示两个轴。我试着调整下降和上升的strokewidth，它只是让它看起来模糊。因此，使strokewidth小于1并不太有效。

代码

var options = {
    title: jsondata['chart_title'],
    hAxis: {direction: -1},
    vAxes: {0:{format:y_units},1:{format:"$#.##"}},
    seriesType: "bars",
    series: {0: {type: "candlesticks", targetAxisIndex: 1}},
    candlestick: {
        fallingColor:{
            strokeWidth: .5
        },
        risingColor:{
            strokeWidth: .5
        }
    },
    displayAnnotations: true,

    crosshair: { trigger: 'both' }
}

和实际绘图元素

var chart = new google.visualization[jsondata['chart_type']](document.getElementById('chart_div'));
$.extend(options, {legend:{position:'bottom'}})
chart.draw(data, options);

示例数据

['Mon', 11, 10, 8, 17, 1],
['Tue', 12, 17, 7, 28, 5],
['Wed', 6, 22, 5, 25, 0],
['Thu', 10, 11, 16, 11, 0],
['Fri', 15, 44, 25, 44, 3]

注意：数据需要更大才能生效，因此复制粘贴此数据10次应该可以解决问题。当只有很少的数据点时，烛台相当大，即使有效果，它也是边缘的

有什么建议让它看起来很正常吗？

Answer 1

当图表的宽度超出图表中的条形（烛台和条形）数据点时，会发生此效果。当使用离散（字符串型）轴时，每个数据行被分配（宽度/行）像素用于条形图组，并且条形图在组内并排排列，这在组宽度时会产生一些奇怪的效果变得狭窄。您可以通过使用以下某些组合来解决此问题：

增加图表的宽度
增加条形图组的宽度（通过bar.groupWidth选项，设置为'100%'以最大化）
将isStacked选项设置为true
使用Control过滤数据并使显示的数据集更小

在组合图表中的烛台移位

1 个答案: