Question

我想在我的网页上绘制Google的折线图！这是我的js代码：

function drawVisualization() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['x', 'Cats', 'Blanket 1'],
    ['A',   1,       10],
    ['B',   2,       5],
    ['C',   4,       12],
    ['D',   8,       5]
  ]);

  var options = {
      curveType: 'function',
      lineWidth: 2,
      hAxis: {
        baselineColor: 'red', 
        textStyle: {color: '#000', fontName: 'Arial', fontSize: 10}, 
        gridlines: { color: '#f3f3f3', count: 5} 
      },
      vAxis: {
        baseline: 0, 
        viewWindowMode: "explicit", 
        viewWindow:{ min: 0 },
        gridlines: { color: '#f3f3f3', count: 6} 
      }
    };
  new google.visualization.LineChart(document.getElementById('visualization')).
      draw(data, options);
}

但是，结果图表没有任何垂直轴线。如何添加垂直轴线如下图所示： enter image description here 非常感谢你！

Answer 1

类别轴不支持网格线。因为有问题的数据是使用字符串作为类别（X轴标签），所以没有办法告诉他们＆＃34;应该如何＆＃34;分开。但是，您可以使用以下技术解决这个问题。

技巧1：转动数据数字

所以现在你有字符串，这意味着没有网格线。我们想要网格线，所以我们必须纠正这个小问题。因此，我们将第一列（X）转换为一个数字，其上有一个格式，因此它表示＆＃39; A＆＃39;或者＆＃39; B＆＃39;或者＆＃39; C＆＃39;将鼠标悬停在它上面（以及图例中）：

  var data = new google.visualization.DataTable();
  data.addColumn('number', 'x');
  data.addColumn('number', 'Cats');
  data.addColumn('number', 'Blanket 1');
  data.addRows([
    [{v: 1, f:'A'},   1,       10],
    [{v: 2, f:'B'},   2,       5],
    [{v: 3, f:'C'},   4,       12],
    [{v: 4, f:'D'},   8,       5]
  ]);

但这并没有解决问题。现在我们在底部轴上有数字，以奇怪的0.8间隔切断。所以我们要解决这个问题。不幸的是，使用hAxis，您无法设置最小/最大值并坚持下去（我不知道为什么）。我们可以通过在我们的选项中添加基线：0来修复最小值。

要获得最大值，我们必须添加一个虚拟系列。

把它们放在一起，我们得到了这个：

function drawVisualization() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'x');
  data.addColumn('number', 'Cats');
  data.addColumn('number', 'Blanket 1');
  // This dummy series is to extend the chart from 0-5 for padding
  data.addColumn('number', null);
  data.addRows([
    [{v: 1, f:'A'}, 1, 10, null],
    [{v: 2, f:'B'}, 2, 5, null],
    [{v: 3, f:'C'}, 4, 12, null],
    [{v: 4, f:'D'}, 8, 5, null],
    [{v: 5, f:''}, null, null, {v: 0, f:''}]
  ]);

  options = {
    curveType: 'function',
    lineWidth: 2,
    hAxis: {
      // Show a baseline at 0
      baseline: 0,
      // 6 Gridlines, 4 labels + left and right for padding
      gridlines: {
        count: 6
      },
    },
    vAxis: {
      baseline: 0,
    },
    series: [
      {},
      {},
      // Hide our dummy series
      {
        lineWidth: 0,
        pointsize: 0,
        visibleInLegend: false
      },
    ]
  };
  chart1 = new google.visualization.LineChart(document.getElementById('visualization'));
  chart1.draw(data, options);
}

现在它看起来更像你想要的东西。有两个主要问题。一个是如果你鼠标悬停在图表的右下角，会弹出一个空白的工具提示（这不是一个很大的问题，我希望，如果你使图表与事件交互，你可能不得不做一些错误捕获）。另一个是我们图表的底部显示数字，而不是字母。

不幸的是，没有简单的方法将数字格式化为字母（至少在Google实现整个ICU模式集而不仅仅是日期/数字之前）。所以我们需要另外一个解决方法。基本上，我所做的是创建一个全新的图表，只是为了制作标签。然后我将其格式化，以便隐藏除标签之外的所有内容，并确保它与上面的图表水平对齐。

  function drawVisualization() {
    // Create and populate the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'x');
    data.addColumn('number', 'Cats');
    data.addColumn('number', 'Blanket 1');
    // This dummy series is to extend the chart from 0-5 for padding
    data.addColumn('number', null);
    data.addRows([
      [{v: 1, f:'A'}, 1, 10, null],
      [{v: 2, f:'B'}, 2, 5, null],
      [{v: 3, f:'C'}, 4, 12, null],
      [{v: 4, f:'D'}, 8, 5, null],
      [{v: 5, f:''}, null, null, {v: 0, f:''}]
    ]);

    options = {
      curveType: 'function',
      lineWidth: 2,
      hAxis: {
        // Show a baseline at 0
        baseline: 0,
        // 6 Gridlines, 4 labels + left and right for padding
        gridlines: {
          count: 6
        },
        // Hide our labels
        textPosition: 'none'
      },
      vAxis: {
        baseline: 0,
      },
      series: [
        {},
        {},
        // Hide our dummy series
        {
          lineWidth: 0,
          pointsize: 0,
          visibleInLegend: false
        },
      ]
    };

    // Add dummy data for the axis labels
    var data2 = new google.visualization.DataTable();
    data2.addColumn('string', 'x');
    data2.addColumn('number', 'dummy');
    data2.addRows([
      ['A', null],
      ['B', null],
      ['C', null],
      ['D', null]
    ]);

    chart1 = new google.visualization.LineChart(document.getElementById('visualization'));
    chart1.draw(data, options);

    chart2 = new google.visualization.LineChart(document.getElementById('visualization2'));
    chart2.draw(data2,
                {
                  chartArea: {
                    top:0,
                    height:"0%"
                  },
                  min: 0,
                  max: 0,
                  hAxis: {
                    baselineColor: '#FFFFFF'
                  },
                  vAxis: {
                    baselineColor: '#FFFFFF',
                    direction: -1,
                    textPosition: 'none',
                    gridlines: {
                      color: '#FFFFFF'
                    }
                  }
                });
  }

只需在第一个下方制作另一个，然后使用CSS将其正确对齐（将其浮动在同一位置或其他位置），看起来这些标签属于上图。

它不是光荣的，但它确实有效。

Answer 2

使用xticks有一个更优雅的解决方案：为此，我们定义了一个这样的数据表：

var data = new google.visualization.DataTable();
        data.addColumn('number', 'Month');
        data.addColumn('number', 'Sales');
        data.addRows([
        [{v: 0, f:'Jan'}, 1000],
        [{v: 1, f:'Feb'}, 1170],
        [{v: 2, f:'Mar'}, 660],
        [{v: 3, f:'Apr'}, 1030]
    ]);

我们设置数字值，但也为Month轴设置字符串标签只有这个和format属性被删除，我们会得到垂直线而不是数字而不是x轴标签的字符串，这不是我们想要的。
要解决此问题，我们可以设置xticks以强制绘制正确的标签。

var options = {
        title: '',
        hAxis: {
            title: 'Month',
            titleTextStyle: {
                color: '#333'
            },
            baseline: 0,
            gridlines: {
                color: '#f3f3f3',
              count: 4
            },
           ticks: [{v: 0, f:'Jan'},{v: 1, f:'Feb'},{v: 2, f:'Mar'},{v: 3, f:'Apr'}], // <------- This does the trick
        },
        vAxis: {
            minValue: 0,
            gridlines: {
                color: '#f3f3f3',
                count: 5
            }
        }
    };

这是一个完整的工作小提示，向您展示如何做到：http://jsfiddle.net/j29Pt/417/

Google Chart：如何为LineChart绘制垂直轴？

2 个答案: