Question

当我把这个下面的代码放在可视化游乐场上时，我得到了目标/目标行，但我希望它是虚线/点缀，这需要在文档中指定的确定性角色。任何人都可以告诉我如何使用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
           }
      );
}

更新

我在下面的代码中得到了这个代码，但我如何制作线条拉伸图宽度 Indicator Arrow & Description to extend dashed line

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

那么虚线的JSON格式是什么？
有没有，我的意思是无论如何我可以在目标线的右角显示一个箭头指示器，以直观地指示目标？

Answer 1

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

    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
             }
            );
    }

Google Visualization Column Chart将Target行指定为Certainty角色

1 个答案: