14

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

線をオレンジ色に、注釈テキストを灰色にしたいと思います。現在、注釈テキストはオレンジ色です。

4

5 に答える 5

20

余分なスタイル データ列と配管コードを使用して、すべての行を醜い (さらには上記で不完全な) 書式設定文字列で埋める必要はありません。異なるデータ ポイントに対して異なる注釈の色を使用する場合にのみ、個別のスタイル設定列に頼ってください。

グローバル設定があります。https://developers.google.com/chart/interactive/docs/gallery/linechartで検索しannotations.textStyleてください

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

あなたの場合のコンセプトコードは次のとおりです（異なる初期化に注意してくださいgoogle.charts、非常に重要です）：

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

}

太字、斜体、フォント タイプなど、注釈の他のテキスト形式を変更することもできます。以下は、ほとんどのテキストが太字に設定されている例です。

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

ソース リポジトリ リンクを含むその他の例: https://mrcsabatoth.github.io/GoogleChartsTalk/

于 2016-12-22T21:26:33.073 に答える
6

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

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-sp-500で例を参照して ください。

于 2014-12-28T20:45:19.893 に答える
1

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

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

"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 では、日付と「total-balance」が常に入力されています。「Ann」と注釈は通常空です。

  "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
        }
     ]
  },

注釈が必要な場合、"Ann" セルは合計残高と同じ値を取得し、注釈が追加されます。

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

GChart の構成で、2 つの色を設定できるようになりました。1つは通常のライン用で、もう1つは「アン」用です。

colors: ['black','red']

「接触」する注釈がない場合、GCharts はそれらの間に線を描画せず、点は「見えない」ままになりますが、注釈は正確に正しい場所に表示されます。

于 2013-10-11T06:33:45.510 に答える
0

短い答え: いいえ、標準オプションを使用してテキストの色を変更することはできません (SVG でそのテキストを見つけて、javascript でその色を変更する何かを書くことはできますが、それは私のレベルを超えています)。

Google グループに関する 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
        }
    });
}

できることは、線のスタイルを変更することですが、現在、線の色を変更できるようには見えません。

于 2013-03-04T02:34:45.907 に答える
0

これは、新しい列 {"type":"string","role":"style"} を追加できる 'style' オプションを使用して更新され、各行には {"v":"point {size : 4; 塗りつぶしの色: #3366cc;}"}? これにより、注釈をポイント/マーカー (ポイントごとに変更可能) と同じ色にすることができますが、太字にすることはできません。試すデータの一例は、

var data =new google.visualization.DataTable(
{
"cols":[
{"label":"Log GDP Per-Capita ","type":"number"},
{"label":"New Chart",
"type":"number"},
{"type":"string","role":"annotation"},
{"type":"string","role":"style"}
],
"rows":[
{"c":[{"v":10.21932},{"v":12.3199676},{"v":"ABW"},{"v":"point {size: 4; fill-color: #3366cc;}"}]},
{"c":[{"v":10.68416},{"v":8.4347518},{"v":"ARE"},{"v":"point {size: 4; fill-color: #3366cc;}"}]},
{"c":[{"v":9.634226},{"v":12.0774068},{"v":"ATG"},{"v":"point {size: 4; fill-color: #3366cc;}"}]},
{"c":[{"v":10.83869},{"v":1.8545959},{"v":"AUS"},{"v":"point {size: 4; fill-color: #3366cc;}"}]},
{"c":[{"v":10.7687},{"v":7.4919999},{"v":"AUT"},{"v":"point {size: 4; fill-color: #3366cc;}"}]}
]
}
);
于 2020-05-17T14:57:18.250 に答える