1

当我把这个代码放在我在可视化操场上的代码下面时，我得到了目标/目标线，但我希望它是虚线/虚线，这需要文档中指定的确定性角色。谁能启发我如何使用 Google Datatable 或 Datatable json 字符串格式的数组输入来做到这一点

代码

function drawVisualization() {

  // Create and populate the data table.
 var data = google.visualization.arrayToDataTable([
    ['Year', 'Red', 'Yellow', 'Green','Target'],
    ['2003',  20,   0,      0,80],
    ['2004',  0,   55,      0,80],
    ['2005',  0,   0,       80,80],
    ['2005',  0,   0,      85,80]
  ]);

  // Create and draw the visualization.
  new google.visualization.ColumnChart(document.getElementById('visualization')).
      draw(data,
           {title:"Yearly Coffee Consumption by Country",
            width:600, height:400,
            hAxis: {title: "Year"},
            legend:'none',
            colors:['red','yellow','green'],
            //isStacked: true,
            series:{
              3:{type:'steppedArea',areaOpacity:0}
            }
            //interpolateNulls: true
           }
      );
}​

更新

我用代码把它降到了下面这个级别，但是我如何使线拉伸图宽度 延长虚线的指示箭头和说明

function drawVisualization() {

  var data = new google.visualization.DataTable();
data.addColumn('string', 'Month'); // Implicit domain label col.
data.addColumn('number', 'Sales'); // Implicit series 1 data col.
data.addColumn({type:'number'});  // interval role col.
data.addColumn({type:'number'});  // interval role col.
data.addColumn({type:'number'});  // interval role col.
data.addColumn({type:'boolean',role:'certainty'}); // certainty col.
data.addRows([
    ['Red',20,  0,0,  80,true],
    ['Yellow',  0, 55, 0,  80,false],
    ['Green',  0,  0,  85,  80,false]
]);

  // Create and draw the visualization.
  new google.visualization.ColumnChart(document.getElementById('visualization')).
      draw(data,
           {title:"Yearly Coffee Consumption by Country",
            width:600, height:400,
            hAxis: {title: "Year"},
            legend:'none',
            colors:['red','yellow','green'],
            //isStacked: true,
            series:{
              3:{type:'line',areaOpacity:0}
            }
            //interpolateNulls: true
           }
      );
}​

操场：

https://code.google.com/apis/ajax/playground/?type=visualization#column_chart

角色文档：

https://developers.google.com/chart/interactive/docs/roles

  1. 那么虚线的正确 JSON 格式是什么？

  2. 有没有，我的意思是无论如何我可以在目标线的右上角显示一个箭头指示器以直观地指示目标？

4

1 回答 1

4

您可以通过在图表的开头和结尾创建空列，然后将视图窗口设置在您实际想要的范围内来实现这一点。下面的代码实现了这一点：

    function drawVisualization() {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Month'); // Implicit domain label col.
      data.addColumn('number', 'Sales'); // Implicit series 1 data col.
      data.addColumn({type:'number'});  // interval role col.
      data.addColumn({type:'number'});  // interval role col.
      data.addColumn({type:'number'});  // interval role col.
      data.addColumn({type:'boolean',role:'certainty'}); // certainty col.
      data.addRows([
        ['', null, null, null, 80, false],
        ['Red',20,  0,0,  80,true],
        ['Yellow',  0, 55, 0,  80,false],
        ['Green',  0,  0,  85,  80,false],
        ['', null, null, null, 80, true]
      ]);

      // Create and draw the visualization.
      new google.visualization.ColumnChart(document.getElementById('visualization')).
        draw(data,
             {title:"Yearly Coffee Consumption by Country",
              width:600, height:400,
              hAxis: {title: "Year"},
              legend:'none',
              colors:['red','yellow','green'],
              //isStacked: true,
              series:{
                3:{type:'line',areaOpacity:0}
              },
              hAxis: {
                viewWindow: {
                  min: 1,
                  max: 4
                }
              }

              //interpolateNulls: true
             }
            );
    }
    ​
于 2013-09-20T15:19:35.010 回答