javascript - 为什么谷歌烛台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 值，因此您看不到错误/容差线，因为它隐藏在酒吧。 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