为什么 google 烛台 fallingColor 和 risingColor 对此不起作用？

Question

我正在研究 Google 可视化图表。

我正在尝试使用示例数据绘制烛台图表，我面临的问题是下降颜色和上升颜色仅以单一颜色表示

这是我的代码

var mydata = [['13-Oct',1109.95,1132,1097.95,1113.45],['14-Oct',1113.45,1117,1095.6,1101.15],['15-Oct',1116,1132,1092.1,1129.2],['16-Oct',1130,1182.4,1130,1170.3],['19-Oct',1174,1182.2,1144.5,1162.15]];

function drawChart() {

    var data = google.visualization.arrayToDataTable(mydata, true);

  var options = {
      legend:'none',
      colors:['red','brown'],
      candlestick: {
           fallingColor:{ fill: "orange", strokeWidth:0.5,stroke:'black'},
           risingColor:{fill:"yellowgreen",strokeWidth:0.5,stroke:'black'}}
  };

  var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));

    chart.draw(data, options);
}

这是我的 fiddle

http://jsfiddle.net/pdmpb9w1/7/

你能告诉我如何解决这个问题吗？？

Answer 1

正如凯文布朗所说，问题出在你的数据上。您的数据结构应如下所示：

var mydata = [
    //category  start err  start     end       end err
    ['13-Oct',  1109.95,   1132,     1097.95,  1113.45],
    ['14-Oct',  1113.45,   1117,     1095.6,   1101.15],
    ['15-Oct',  1116,      1132,     1092.1,   1129.2],
    ['16-Oct',  1130,      1182.4,   1130,     1170.3],
    ['19-Oct',  1174,      1182.2,   1144.5,   1162.15]
];

如您所见，end 列中的所有值都小于 start 列中的值，因此所有烛台都带有颜色，好像在下降。

最重要的是，您所有的 start err 值都小于您的 start 值，因此您看不到 error/tolerance 行，因为它隐藏在栏的后面。 end 值反之亦然。

我不知道你的数据应该如何排序，但如果我不得不猜测它会是这样的：

var mydata = [
    // note the first two numbers are swapped with the second two
    ['13-Oct', 1097.95, 1113.45, 1109.95, 1132],
    ['14-Oct', 1095.6,  1101.15, 1113.45, 1117],
    ['15-Oct', 1092.1,  1129.2,  1116,    1132],
    ['16-Oct', 1130,    1170.3,  1130,    1182.4],
    ['19-Oct', 1144.5,  1162.15, 1174,    1182.2]
];

这将呈现以下内容：

JSFiddle

为什么 google 烛台 fallingColor 和 risingColor 对此不起作用？

Why google candlestick fallingColor and risingColor are not working for this?

javascript

charts

data-visualization

google-visualization