Question

我的图表有一个日期时间值和两个数字值（正数和负数）。

上图显示了绘制一个条形图的结果，日期时间是当前日期，问题是，条形图涵盖1990年到2050年，当时它应该只覆盖当前月份。

如果我画了2个柱子，一个用于上个月，一个用于当月，一切都被正确绘制。

我假设GoogleCharts出于某种原因需要至少2个日期。有没有人知道如何解决这个问题，或者给出一些指导。

提前致谢，

编辑为添加：

我正在使用的图表：

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

我正在绘制的单个条形图来自historyChart中的此数据存储：

[["2016-10-01T00:00:00+00:00", 5000.0, 0]]

我将以这种方式将此数据插入图表：

data.addColumn('datetime', 'Chart Filter');
        data.addColumn('number');
        data.addColumn('number');
        data.addRows(historyChart);

图表包装器和选项如下：

var programmaticChart  = new google.visualization.ChartWrapper({
          'chartType': 'ColumnChart',
          'containerId': 'programmatic_chart_div',
          'options': {
            displayExactValues:false,
            vAxis: {
                format: '$#,###', //add $sign in virtical axis
                viewWindowMode: 'maximized',
            },
            hAxis:{
                format: 'MMM-yyyy',
            },

            width: 900,
            height: 450,
            chartArea: {
                'backgroundColor': {
                    'fill': '#F4F4F4',
                    'opacity': 100
                 },
                top:50,
                left:85,
                width: 1000

            },
            title: "{{ member.username }}'s chart", //set user name as chart's title
            isStacked:"true",
            bar:{groupWidth: "95%"},
            colors: ['#7FFF00', '#e6693e'],

          }
        });

        // Create and draw the visualization.
        dashboard.bind(programmaticSlider, programmaticChart);
        dashboard.draw(data);

Answer 1

为hAxis.ticks添加选项似乎有帮助......

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

google.charts.load('43', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('datetime', 'Chart Filter');
    data.addColumn('number');
    data.addColumn('number');
    data.addRows([
      [new Date("10/01/2016"), 5000.0, 0]
    ]);

    var programmaticChart  = new google.visualization.ChartWrapper({
      chartType: 'ColumnChart',
      containerId: 'programmatic_chart_div',
      dataTable: data,
      options: {
        displayExactValues: false,
        vAxis: {
          format: '$#,###',
          viewWindowMode: 'maximized'
        },
        hAxis:{
          format: 'MMM-yyyy',
          ticks: [new Date("10/01/2016")]
        },
        width: 900,
        height: 450,
        chartArea: {
          backgroundColor: {
            fill: '#f4f4f4',
            opacity: 100
          },
          top: 50,
          left: 85,
          width: 1000
        },
        title: '{{ member.username }}\'s chart',
        isStacked: 'true',
        bar:{groupWidth: '95%'},
        colors: ['#7fff00', '#e6693e']
      }
    });
    programmaticChart.draw();

    //dashboard.bind(programmaticSlider, programmaticChart);
    //dashboard.draw(data);
  },
  packages: ['corechart', 'controls']
});

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

GoogleChart没有正确绘图

1 个答案: