web-dev-qa-db-ja.com

Google面グラフの軸と全幅の設定

Googleの面グラフに2つのx '軸をスタイル設定して追加しようとしています（画像のaとb）。たとえば、a軸は900に、b：700に設定する必要があります。

また、チャートを含むdivの全幅（960px）までチャートを拡張しようとしていますが、私のソリューションでは何も実行しないようです。

This is the desired effectこれは望ましい効果です。

現在のjs

google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses'],
            ['November',  1000,      400],
            ['December',  1170,      460],
            ['January',  660,       1120],
            ['February',  690,       1120],
            ['March',  780,       1120],
            ['April',  820,       1120],
            ['May',  660,       1120],
            ['June',  1030,      540]
    ]);

    var options = {
      title: '',
      backgroundColor: 'none',
      width:'960',
      legend: {position: 'none'},
      hAxis: {title: 'Year',  titleTextStyle: {color: 'grey'},
      }
    };

    var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
javascriptcharts
22
Rob

グラフの幅を正しくするには、chartArea定義をoptionsオブジェクトに追加します。 chartArea設定は、「構成オプション」の下の AreaChartドキュメント にリストされています。

_chartArea: {
    left: 40,
    top: 10,
    width: 900,
    height: 350
}
_

デモ：http://jsfiddle.net/2H7sp/

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

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Year', 'Sales', 'Expenses'],
        ['November', 1000, 400],
        ['December', 1170, 460],
        ['January', 660, 1120],
        ['February', 690, 1120],
        ['March', 780, 1120],
        ['April', 820, 1120],
        ['May', 660, 1120],
        ['June', 1030, 540]
    ]);

    var options = {
        title: '',
        backgroundColor: 'none',
        legend: { position: 'none' },
        hAxis: {
            title: 'Year',
            titleTextStyle: {
                color: 'grey'
            }
        },
        chartArea: {
            left: 40,
            top: 10,
            width: 600,
            height: 150
        }
    };

    var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}_
_body { margin: 0; }
#chart_div {
    background-color: #f5f5f5;
    width: 660px;
    height: 200px;
    overflow: hidden;
    margin: 0 auto;
}_
_<script src="https://www.google.com/jsapi?jsapi.js"></script>
<div id="chart_div"></div>_

少し数字をいじる必要があります。 chartAreaは、軸、タイトル、および凡例を除く、グラフのグラフィック部分を指します。したがって、スペースを空けるために、値にパディングを追加する必要があります。

編集：水平線を取得するには、それぞれの列の各行に値が900と700の2つのシリーズを追加する必要があります。

_var data = google.visualization.arrayToDataTable([   
    [ 'Year',     'Sales',  'Expenses',  'a',   'b'  ],
    [ 'November',  1000,     400,         900,   700 ],   
    [ 'December',  1170,     460,         900,   700 ],   
    [ 'January',   660,      1120,        900,   700 ],
    ...
_

色を正しくするには、seriesオプションの定義を指定して、領域を非表示にし、線の色を2つの新しい系列に黒にします。

_var options = {
    ...
    series: {
        2: { areaOpacity: 0, color: "#000" },
        3: { areaOpacity: 0, color: "#000" }
    },
    ...
_

これは近いですが、線は破線ではなく実線になり、ラベルはありません。データテーブルに ロールを持つ列 を追加することで、これらの効果を得ることができます。これには.arrayToDataTable()を使用できませんが、代わりに、より詳細な構文を使用する必要があります。

_var data = new google.visualization.DataTable();
data.addColumn("string", "Year");
data.addColumn("number", "Sales");
data.addColumn("number", "Expenses");
data.addColumn("number", "a");
data.addColumn("number", "b");
data.addRows([
    ['November', 1000, 400,  900, 700],
    ['December', 1170, 460,  900, 700],
    ['January',  660,  1120, 900, 700],
    ...
_

破線の場合は、「a」列と「b」列のそれぞれの後に certainty role column を追加します。

_data.addColumn({ type: "boolean", role: "certainty" });
_

「a」と「b」のラベルを取得するには、確実性の各列の後に annotation role columns を追加します。

_data.addColumn({ type: "string", role: "annotation" });
_

確実性列の値はすべてfalseである必要があります。ラベルを表示する最後の行を除き、注釈列の値はすべてnullにする必要があります。注釈は、希望する場所ではなく、データポイントの上に配置されますが、これで十分です。

新しい列が追加されたデータ行は次のようになります。

_data.addRows([
    ['November', 1000, 400,  900, false, null, 700, false, null],
    ['December', 1170, 460,  900, false, null, 700, false, null],
    ...
    ['May',      660,  1120, 900, false, null, 700, false, null],
    ['June',     1030, 540,  900, false, "a",  700, false, "b"]
]);
_

そして、これが最終結果です：http://jsfiddle.net/2H7sp/2/

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

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn("string","Year");
    data.addColumn("number","Sales");
    data.addColumn("number","Expenses");
    data.addColumn("number","a");
    data.addColumn({type:"boolean",role:"certainty"});
    data.addColumn({type:"string",role:"annotation"});
    data.addColumn("number","b");
    data.addColumn({type:"boolean",role:"certainty"});
    data.addColumn({type:"string",role:"annotation"});
    data.addRows([
        ['November', 1000, 400,  900, false, null, 700, false, null],
        ['December', 1170, 460,  900, false, null, 700, false, null],
        ['January',  660,  1120, 900, false, null, 700, false, null],
        ['February', 690,  1120, 900, false, null, 700, false, null],
        ['March',    780,  1120, 900, false, null, 700, false, null],
        ['April',    820,  1120, 900, false, null, 700, false, null],
        ['May',      660,  1120, 900, false, null, 700, false, null],
        ['June',     1030, 540,  900, false, "a",  700, false, "b"]
    ]);

    var options = {
        title: '',
        backgroundColor: 'none',
        legend: { position: 'none' },
        hAxis: {
            title: 'Year',
            titleTextStyle: { color: 'grey' }
        },
        series:{
            2:{areaOpacity:0,color:"#000"},
            3:{areaOpacity:0,color:"#000"}
        },
        chartArea: {
            left: 40,
            top: 10,
            width: 600,
            height: 150
        }
    };

    var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}_
_body { margin: 0; }
#chart_div {
    background-color: #f5f5f5;
    width: 660px;
    height: 200px;
    overflow: hidden;
    margin: 0 auto;
}_
_<script src="https://www.google.com/jsapi?jsapi.js"></script>
<div id="chart_div"></div>_
41
gilly3