Question

我试图绘制股票的蜡烛图表。但由于周末关闭，图表中存在差距

我有没有选项吗？我希望在不丢失日期的情况下消除差距。

这是代码：

google.charts.load('current', { 'packages': ['corechart'] });
    google.charts.setOnLoadCallback(drawChart);

    //Date, Low, Open, CLose, High, Col 5 [Optional]: A tooltip or style column for the candlestick
    function drawChart() {

        var data = google.visualization.arrayToDataTable(dps, true);
        var options = {
            legend: 'none',
            colors: ['#000'],

            candlestick: {
                fallingColor: { strokeWidth: 0, fill: '#D32F2F' }, // red
                risingColor: { strokeWidth: 0, fill: '#00796B' } // green
            }

        };

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

        chart.draw(data, options);

    }

以下是一些测试数据：

var test = [
        [new Date("2016-11-11"), 250.6, 250.9, 250.7, 254.4],
        [new Date("2016-11-14"), 250.3, 252.8, 251.6, 257.9],
        [new Date("2016-11-15"), 254.9, 255, 263.6, 263.8],
        [new Date("2016-11-16"), 258.1, 264.3, 260.1, 264.3],
        [new Date("2016-11-17"), 259.6, 260, 268.3, 268.9],
        [new Date("2016-11-18"), 267.5, 268, 270.4, 272.3],
        [new Date("2016-11-21"), 265.7, 271.2, 269.1, 271.5]
    ];

Answer 1

使用discrete轴，使用字符串值代替日期，可以防止出现差距

请参阅以下工作代码段...

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});
function drawChart() {
  var dps = [
    [new Date(2016,10,11), 250.6, 250.9, 250.7, 254.4],
    [new Date(2016,10,14), 250.3, 252.8, 251.6, 257.9],
    [new Date(2016,10,15), 254.9, 255, 263.6, 263.8],
    [new Date(2016,10,16), 258.1, 264.3, 260.1, 264.3],
    [new Date(2016,10,17), 259.6, 260, 268.3, 268.9],
    [new Date(2016,10,18), 267.5, 268, 270.4, 272.3],
    [new Date(2016,10,21), 265.7, 271.2, 269.1, 271.5]
  ];

  var formatDate = new google.visualization.DateFormat({
    pattern: 'MMM dd, yyyy'
  });
  dps.forEach(function (row) {
    row[0] = formatDate.formatValue(row[0]);
  });

  var data = google.visualization.arrayToDataTable(dps, true);
  var options = {
    legend: 'none',
    colors: ['#000'],
    candlestick: {
      fallingColor: {
        strokeWidth: 0,
        fill: '#D32F2F'
      },
      risingColor: {
        strokeWidth: 0,
        fill: '#00796B'
      }
    }
  };

  var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

另外，建议在加载Google数据时不要使用以下日期构造函数 new Date("yyyy-MM-dd")

你会注意到“烛台”没有正确对齐网格线，
这里是another question证明问题

根据一年中的时区/时间，您可能最终会有不同的日期如this question

中所示

相反，建议使用以下date constructors之一......

new Date(year, month[, date[, hours[, minutes[, seconds[, milliseconds]]]]]);

（请注意，month基于上述内容为零）

- 或 -

new Date("MM/dd/yyyy")

烛台之间的差距

1 个答案: