组合图表中的烛台移动答案

【问题标题】：Candlestick shift in combo chart组合图表中的烛台移动
【发布时间】：2014-03-13 20:38:52
【问题描述】：

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

但是，当我添加另一个条形系列时，它会导致轻微的偏移，现在蜡烛看起来全乱了。

似乎左垂直轴的宽度会导致这种轻微的偏移。问题是，我需要显示两个轴。我尝试调整下降和上升的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 次应该可以解决问题。当只有少数数据点时，烛台相当大，即使有影响，也是微不足道的

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

【问题讨论】：

您能否添加将问题复制到您的问题的代码？
您也可以添加示例数据吗？我需要能够完全复制问题，以便弄清楚需要做些什么来解决它。
两个都更新了！数据只是粗略的样本，它实际上只是在更大的数据集上才有问题，所以如果你复制那个样本 *10 可以说，那么它将是可见的

标签： javascript jquery google-visualization

【解决方案1】：

当图表中的条形类型（烛台和条形）数据点对于图表的宽度而言过多时，就会出现这种效果。使用离散（字符串类型）轴时，每行数据都为条形组分配（宽度/行）像素，并且条形在组内并排对齐，这会在组宽度时产生一些奇怪的效果变窄。您可以通过使用以下某种组合来解决此问题：

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

【讨论】：

很好的解释！我做了#2，休息对我来说不是一个真正的选择。你知道是否有办法加宽实际的蜡烛而不是边框的宽度？我查看了文档，没有发现任何内容。还有什么方法可以改变棍子的宽度，而不是蜡烛？我觉得棍子和蜡烛的粗细比较有点不对劲
不，这些是不可配置的，抱歉。
覆盖另一个顶部（条形图和蜡烛图）或加宽蜡烛图会很棒。我想我必须屈服于这一点，谢谢你的解释！