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 に答える