Googleグラフの注釈テキストの色を変更する方法

Question

Google Chart ToolsのLineChartで注釈テキストの色を変更するにはどうすればよいですか？

は、ここで私はラインがオレンジ色になりたいの例

google.load('visualization', '1', {packages: ['corechart']}); 
google.setOnLoadCallback(drawChart); 

function drawChart() { 
    var data = new google.visualization.DataTable();  
    data.addColumn('date', 'Date'); 
    data.addColumn('number', 'Sales'); 
    data.addColumn({id: 'title', label: 'Title', type: 'string', role: 'annotation'}); 
    data.addRows([ 
     [new Date(2012, 3, 5), 80, null], 
     [new Date(2012, 3, 12), 120, 'New Product'], 
     [new Date(2012, 3, 19), 80, null], 
     [new Date(2012, 3, 26), 65, null], 
     [new Date(2012, 4, 2), 70, null], 
    ]); 

    var options = { 
     title: 'Sales by Week', 
     displayAnnotations: true, 
     hAxis: {title: 'Date', 
       titleTextStyle: {color: 'grey'}}, 
     colors: ['#f07f09'] 
     }; 

    var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
    chart.draw(data, options);  
} 

とグレーで注釈テキストです。現在、注釈テキストはオレンジです。

Answer 1

実際に可能です。注釈の色は線の色と同じです。注釈を付ける場所にドットを置き、ドットの色を望ましい注釈の色に設定します。

data.addColumn({type: 'string', role: 'style'}); 
data.addColumn({type:'string', role:'annotation'}); 

し、データを追加するときに

'point { size: 14; shape-type: circle; fill-color: #63A74A','Your annotation' 

でも http://www.marketvolume.com/stocks/stochasticsmomentumindex.asp?s=SPY&t=spdr-s-p-500

Answer 2

短い答え：いいえ、標準のオプションでテキストの色を変更することはできません（SVGにそのテキストを見つけてJavaScriptの色を変更することができますが、それは私のレベルを超えています）。

Googleグループhereとその例のhereで、ASGallantからの回答を確認できます。

// code borrowed from Google visualization API playground, slightly modified here 

google.load('visualization', '1', {packages: ['corechart']}); 
google.setOnLoadCallback(drawVisualization); 

function drawVisualization() { 
    // Create and populate the data table. 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'x'); 
    data.addColumn({type: 'string', role: 'annotation'}); 
    data.addColumn({type: 'string', role: 'annotationText'}); 
    data.addColumn('number', 'Cats'); 
    data.addColumn('number', 'Blanket 1'); 
    data.addColumn('number', 'Blanket 2'); 
    data.addRow(["A", null, null, 1, 1, 0.5]); 
    data.addRow(["B", null, null, 2, 0.5, 1]); 
    data.addRow(["C", null, null, 4, 1, 0.5]); 
    data.addRow(["D", null, null, 8, 0.5, 1]); 
    data.addRow(["E", 'foo', 'foo text', 7, 1, 0.5]); 
    data.addRow(["F", null, null, 7, 0.5, 1]); 
    data.addRow(["G", null, null, 8, 1, 0.5]); 
    data.addRow(["H", null, null, 4, 0.5, 1]); 
    data.addRow(["I", null, null, 2, 1, 0.5]); 
    data.addRow(["J", null, null, 3.5, 0.5, 1]); 
    data.addRow(["K", null, null, 3, 1, 0.5]); 
    data.addRow(["L", null, null, 3.5, 0.5, 1]); 
    data.addRow(["M", null, null, 1, 1, 0.5]); 
    data.addRow(["N", null, null, 1, 0.5, 1]); 

    // Create and draw the visualization. 
    var chart = new google.visualization.LineChart(document.getElementById('visualization')); 
    chart.draw(data, { 
     annotation: { 
      1: { 
       style: 'line' 
      } 
     }, 
     curveType: "function", 
     width: 500, 
     height: 400, 
     vAxis: { 
      maxValue: 10 
     } 
    }); 
} 

あなたができる最善のは、線のスタイルを変更することですが、あなたは、現在の行の色を変更することができますようにそれは見えません。

Answer 3

注釈が「触れていない」場合、つまり注釈を付けるポイントが互いに隣り合わない場合は、2行目を追加してその行に注釈を追加することができます。

以下のJSONの例では、日付と「合計残高」と「アン」行があります。

"cols":[ 
     { 
     "id":"date", 
     "label":"date", 
     "type":"date", 
     "p":{ 
      "role":"domain" 
     } 
     }, 
     { 
     "id":"total-balance", 
     "label":"Total balance", 
     "type":"number", 
     "p":{ 
      "role":"data" 
     } 
     }, 
     { 
     "id":"ann", 
     "label":"Ann", 
     "type":"number", 
     "p":{ 
      "role":"data" 
     } 
     }, 
     { 
     "type":"string", 
     "p":{ 
      "role":"annotation" 
     } 
     }, 
     { 
     "type":"string", 
     "p":{ 
      "role":"annotationText" 
     } 
     } 
    ], 

注釈は「Ann」列の後に来るため、「Ann」データ点に追加されます。私のJSONで

、日付や「トータル・バランス」は常に「アン」で満たされていると注釈が、通常は空です：。

"rows":[ 
    { 
    "c":[ 
     { 
      "v":"Date(2013, 0, 1)" 
     }, 
     { 
      "v":1000 
     }, 
     { 
      "v":null 
     }, 
     { 
      "v":null 
     }, 
     { 
      "v":null 
     } 
    ] 
    }, 
    { 
    "c":[ 
     { 
      "v":"Date(2013, 0, 8)" 
     }, 
     { 
      "v":1001 
     }, 
     { 
      "v":null 
     }, 
     { 
      "v":null 
     }, 
     { 
      "v":null 
     } 
    ] 
    }, 

私は注釈が必要な場合は、「アン」のセルが取得しますトータルバランスと同じ値、および注釈が追加されます：あなたのGChartの構成では

{ 
    "c":[ 
     { 
      "v":"Date(2013, 1, 26)" 
     }, 
     { 
      "v":2000 
     }, 
     { 
      "v":2000 
     }, 
     { 
      "v":"Something!" 
     }, 
     { 
      "v":"Something happened here!" 
     } 
    ] 
    }, 

は、あなたは今、2つの色を設定することができます。 1つは法線、もう1つは "Ann"です。注釈が正確に正しい場所に現れながら

colors: ['black','red'] 

あなたは何の注釈「感動」を持っていない場合は、GChartsはそれらと点の間に線を引くませんが、「目に見えない」ままになります。

Answer 4

で醜いと行ごとにそれを埋めるために余分なスタイルデータ列と配管コードのための必要性を全く例を参照してくださいしない（と上記の不完全な）書式設定文字列。さまざまなデータポイントに対して異なる注釈の色を使用する場合は、スタイリング列を分割するだけです。

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 

google.charts.load('current', { 'packages': ['corechart', 'line', 'bar'] }); 
google.charts.setOnLoadCallback(drawChart); 

function drawChart() { 
    var data = new google.visualization.DataTable();  
    data.addColumn('date', 'Date'); 
    data.addColumn('number', 'Sales'); 
    data.addColumn({id: 'title', label: 'Title', type: 'string', role: 'annotation'}); 
    data.addRows([ 
    [new Date(2012, 3, 5), 80, null], 
    [new Date(2012, 3, 12), 120, 'New Product'], 
    [new Date(2012, 3, 19), 80, null], 
    [new Date(2012, 3, 26), 65, null], 
    [new Date(2012, 4, 2), 70, null], 
    ]); 

    var options = { 
    chart: { 
     title: 'Sales by Week' 
    }, 
    hAxis: { 
     title: 'Date', 
     titleTextStyle: {color: 'grey'} 
    }, 
    annotations: { 
     textStyle: { 
     color: 'grey', 
     } 
    } 
    colors: ['#f07f09'] 
    }; 

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

}

：

グローバル設定があります、ここでhttps://developers.google.com/chart/interactive/docs/gallery/linechart

var options = { 
    annotations: { 
    textStyle: { 
     fontName: 'Times-Roman', 
     fontSize: 18, 
     bold: true, 
     italic: true, 
     // The color of the text. 
     color: '#871b47', 
     // The color of the text outline. 
     auraColor: '#d799ae', 
     // The transparency of the text. 
     opacity: 0.8 
    } 
    } 
}; 

にannotations.textStyleを検索すると、あなたのケースのためのコンセプトコードである（異なる初期化google.charts、非常に重要に気づきます）

太字、斜体、フォントの種類など、注釈の他のテキスト書式を変更することもできます。ここには例がありますほとんどのテキストが太字に設定されている場合：

   var options = { 
        chart: { 
        title: title 
        }, 
        hAxis: { 
        textStyle: { 
         bold: true 
        } 
        }, 
        vAxis: { 
        format: 'decimal', 
        textStyle: { 
         bold: true 
        } 
        }, 
        legendTextStyle: { 
        bold: true 
        }, 
        titleTextStyle: { 
        bold: true 
        }, 
        width: chart_width, 
        //theme: 'material', // material theme decreases the color contrast and sets the black color items (all text) to 171,171,171 grey -> washed out 
        annotations: { 
        alwaysOutside: true, 
        highContrast: true, // default is true, but be sure 
        textStyle: { 
         bold: true 
        } 
        } 
       };