Google visualization 在GViz中的列上方显示阶梯面积线_Google Visualization

Google visualization 在GViz中的列上方显示阶梯面积线

google-visualization

Google visualization 在GViz中的列上方显示阶梯面积线,google-visualization,Google Visualization,我用GViz创建了一个图表，如下所示：这是一个组合图，一个系列显示为列，另一个显示为阶梯区域（0%不透明度，connectSteps:false）。我不想使用直线，因为它只在每个列的中间有一个点。< /P> 我试图让这些行显示在列的上方，因为它们代表一个目标量。我尝试过切换数据列的顺序，但显示的方式相同。有没有办法在序列上指定z索引旁注：这是谷歌网站上的一张图表，但通过编辑HTML，我可以通过GViz指定大多数可用选项。我已经浏览了文档，但还没有看到可以这样做的内容。目前无法调整组合图上的

我用GViz创建了一个图表，如下所示：

这是一个组合图，一个系列显示为列，另一个显示为阶梯区域（0%不透明度，connectSteps:false）。我不想使用直线，因为它只在每个列的中间有一个点。< /P> 我试图让这些行显示在列的上方，因为它们代表一个目标量。我尝试过切换数据列的顺序，但显示的方式相同。有没有办法在序列上指定z索引

旁注：这是谷歌网站上的一张图表，但通过编辑HTML，我可以通过GViz指定大多数可用选项。我已经浏览了文档，但还没有看到可以这样做的内容。

目前无法调整组合图上的Z轴（因此，您无法以自己的方式执行您试图执行的操作）

但是，如果您想变得棘手，可以使用XY散点图重新创建相同类型的图表

示例（复制粘贴到谷歌游乐场）：


谷歌可视化API示例
load（'visualization'，'1'，{packages:['corechart']}）；
函数drawVisualization（）{
//创建并填充数据表。
var data=new google.visualization.DataTable（）；
data.addColumn（'number'，'X'）；
data.addColumn（'number'，'Sales'）；
data.addColumn（'number'，'Targets'）；
data.addRows([
[1，0，null]，
[1，1，null]，
[1，null，null]，
[2，0，null]，
[2,3,null]，
[2，null，null]，
[3，0，null]，
[3,3,null]，
[3，空，空]，
[0.5，空，1.5]，
[1.5，空，1.5]，
[1.5，空，空]，
[1.5，空，2.5]，
[2.5，空，2.5]，
[2.5，空，空]，
[2.5，空，3]，
[3.5，空，3]，
]);
//创建并绘制可视化。
var chart=新的google.visualization.ScatterChart(
document.getElementById（'visualization'）；
图表绘制（数据、{
宽度：600，
身高：400，
系列：{0:{color:'black'，线宽：40，点大小：0}，1:{color:'red'，线宽：10，点大小：0}）；
}
setOnLoadCallback（drawVisualization）；

谢谢！那就行了，除了我的X轴是不同类别的字符串。不过，对于任何使用数字的人来说，这都是一个很好的答案。好吧，有很多方法可以在我的示例中添加字符串，例如，创建一个最小/最大值为零的二次线或柱状图，没有数据，并且在其下方隐藏带有标签的轴/网格线。我没有考虑到这一点。下周发布当前更新后，我将看一看。我创建了一个示例，说明如何在图表中添加假标签。如果您想了解使用哪些技巧，请随意看一看。

<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>
      Google Visualization API Sample
    </title>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['corechart']});
    </script>
    <script type="text/javascript">
      function drawVisualization() {
        // Create and populate the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('number', 'X');
        data.addColumn('number', 'Sales');
        data.addColumn('number', 'Targets');
        data.addRows([
          [1, 0, null],
          [1, 1, null],
          [1, null, null],
          [2, 0, null],
          [2, 3, null],
          [2, null, null],
          [3, 0, null],
          [3, 3, null],
          [3, null, null], 
          [0.5,null,1.5],
          [1.5,null,1.5],
          [1.5,null,null],    
          [1.5,null,2.5],
          [2.5,null,2.5],
          [2.5,null,null],    
          [2.5,null,3],
          [3.5,null,3],
        ]);

        // Create and draw the visualization.
        var chart = new google.visualization.ScatterChart(
        document.getElementById('visualization'));
        chart.draw(data, {
          width: 600,
          height: 400,
          series: {0:{color: 'black', lineWidth: 40, pointSize: 0}, 1:{color: 'red', lineWidth: 10, pointSize: 0}}  });
      }

      google.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="visualization" style="width: 600px; height: 400px;"></div>
  </body>
</html>