web-dev-qa-db-ja.com

Google Chart背景色

JavaScript APIを使用してGoogleチャートをスタイリングしています。データがプロットされる領域の背景を変更したい。背景オプションを次のように設定すると、何らかの理由で：

chart.draw(data, { backgroundColor: { fill: "#F4F4F4" } })

データがプロットされる領域ではなく、チャート全体の背景を変更します。プロットされたエリアの背景のみを変更する方法に関するアイデアはありますか？ありがとう

chartsgoogle-visualization
30
firebait

このようなオプションを渡します

var options = {
    title: 'title',
    width: 310,
    height: 260,
    backgroundColor: '#E4E4E4',
    is3D: true
};
49
uma shankar pandey

これをオプションに追加します。

'chartArea': {
    'backgroundColor': {
        'fill': '#F4F4F4',
        'opacity': 100
     },
 }
12
Kris Lamote

オプションを使用する方が簡単です。

drawChart() {
    // Standard google charts functionality is available as GoogleCharts.api after load
    const data = GoogleCharts.api.visualization.arrayToDataTable([
        ['Chart thing', 'Chart amount'],
        ['Na Meta', 50],
        ['Abaixo da Meta', 22],
        ['Acima da Meta', 10],
        ['Refugos', 15]
    ]);

    let options = {
      backgroundColor: {
        gradient: {
          // Start color for gradient.
          color1: '#fbf6a7',
          // Finish color for gradient.
          color2: '#33b679',
          // Where on the boundary to start and
          // end the color1/color2 gradient,
          // relative to the upper left corner
          // of the boundary.
          x1: '0%', y1: '0%',
          x2: '100%', y2: '100%',
          // If true, the boundary for x1,
          // y1, x2, and y2 is the box. If
          // false, it's the entire chart.
          useObjectBoundingBoxUnits: true
        },
      },
    };

    const chart = new GoogleCharts.api.visualization.ColumnChart(this.$.chart1);
    chart.draw(data, options);
}

polymerを使用しているため、this。$。cart1を使用していますが、selectedbyidを使用しても問題ありません。

3
Emerson Bottero

適切な答えは、それが従来のGoogleチャートかマテリアルGoogleチャートかによって異なります。 Googleチャートのクラシックバージョンを使用している場合、上記の提案の複数が機能します。ただし、新しいマテリアルタイプのGoogleチャートを使用する場合は、オプションを異なる方法で指定するか、オプションを変換する必要があります（以下のgoogle.charts.Bar.convertOptions(options)を参照）。さらに、マテリアルチャートの場合、チャート全体に不透明度を指定すると、不透明度（のみ）はチャートエリアに適用されません。そのため、同じ色の組み合わせであっても、チャート領域の不透明度で色を明示的に指定する必要があります。

一般的に、Google Chartのマテリアルバージョンには、Classicの機能（傾斜軸ラベル、傾向線、カスタム列の色付け、コンボチャートなど）の一部の機能が欠けています。 quadruple、...）軸は、Materialバージョンでのみサポートされます。

機能が両方でサポートされている場合、マテリアルチャートではオプションに異なる形式が必要になることがあります。

<body>
  <div id="classic_div"></div>
  <div id="material_div"></div>
</body>

JS：

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

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses'],
      ['2004',  1000,    400],
      ['2005',  1170,    460],
      ['2006',   660,   1120],
      ['2007',  1030,    540],
      ['2009',  1120,    580],
      ['2010',  1200,    500],
      ['2011',  1250,    490],
    ]);
    var options = {
      width: 1000,
      height: 600,
      chart: {
        title: 'Company Performance',
        subtitle: 'Sales, Expenses, and Profit: 2014-2017'
      },
      // Accepts also 'rgb(255, 0, 0)' format but not rgba(255, 0, 0, 0.2),
      // for that use fillOpacity versions
      // Colors only the chart area, simple version
      // chartArea: {
      //   backgroundColor: '#FF0000'
      // },
      // Colors only the chart area, with opacity
      chartArea: {
        backgroundColor: {
          fill: '#FF0000',
          fillOpacity: 0.1
        },
      },
      // Colors the entire chart area, simple version
      // backgroundColor: '#FF0000',
      // Colors the entire chart area, with opacity
      backgroundColor: {
        fill: '#FF0000',
        fillOpacity: 0.8
      },
    }

    var classicChart = new google.visualization.BarChart(document.getElementById('classic_div'));
    classicChart.draw(data, options);

    var materialChart = new google.charts.Bar(document.getElementById('material_div'));
    materialChart.draw(data, google.charts.Bar.convertOptions(options));
  }

フィドルデモ： https://jsfiddle.net/csabatoth/v3h9ycd4/2/

3
Csaba Toth

backgroundcolor.strokeとbackgroundcolor.strokewidthを使用してみましたか？

Google Charts documentation を参照してください。

2
andypotter

If you want to do like this then it will help

このようにしたい場合は役立ちます。私が使う stepped area Googleライブラリのコンボチャートのチャート。各ステップ領域の値は目盛りの値です。

jsfiddle code のリンクはこちら

1
Vikas Rinvi

CSSでそれを行うことができます：

#salesChart svg > rect {  /*#salesChart is ID of your google chart*/
    fill: #F4F4F4;
}
0
Zahidul Islam Ruhel