Google Chartの色個々のバー

Question

私はすべてのトリックを箱に入れました。すべてのヘルプ記事を読んだ後、私はこのコードが実際に動作するはずだと思った。しかし、それは私のバーを色分けすることはありません。私は間違って何をしていますか？

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

 
function drawDualX() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['Date', 'Elevation', { 
 
     role: 'style' 
 
    }], 
 
    ['2016-08-06T08:09:47Z', 1977.4, 'color: yellow'], 
 
    ['2016-08-06T08:13:29Z', 1981, 'color: green'], 
 
    ['2016-08-06T08:14:08Z', 1986.9, 'color: yellow'], 
 
    ['2016-08-06T08:14:22Z', 1988.9, 'color: green'], 
 
    ['2016-08-06T08:14:25Z', 1989.2, 'color: green'], 
 
    ['2016-08-06T08:14:29Z', 1989.7, 'color: yellow'], 
 
    ['2016-08-06T08:14:32Z', 1990.1, 'color: green'], 
 
    ]); 
 
    var options = { 
 
    chart: { 
 
     title: 'Elevation Chart', 
 
    }, 
 
    bars: 'vertical' 
 
    }; 
 
\t 
 
\t 
 
    var material = new google.charts.Bar(document.getElementById('chart_div')); 
 
    material.draw(data, options); 
 
}

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

Answer 1

を試してみて、これは動作していないという理由があります。これは、Google Visualization APIの完全に再設計された実装です。これは、従来のベータ版の「Classic」チャートパッケージとは異なります。ここでは多くの関連する質問があります（下記参照）、の材料表ではまだ列の役割（'color'を指定するために使用したとおりです）はサポートされていません。

各データポイントにカスタマイズされたスタイルを使用する場合は、次のように古い（しかしはるかにサポートされている）Google Visualization "Classic"コアチャートパッケージを使用する必要があります。チャートの最初のデザインは少し異なりますが、より広範なカスタマイズオプションは、あなたが望むように見えるようにすることを意味します！

google.charts.load('current', { 
 
    packages: ['corechart' /*, 'bar'*/ ] /* Don't need to load the bar package */ 
 
}); 
 
google.charts.setOnLoadCallback(drawDualX); 
 

 
function drawDualX() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['Date', 'Elevation', { 
 
     role: 'style' 
 
    }], 
 
    ['2016-08-06T08:09:47Z', 1977.4, 'color: yellow'], 
 
    ['2016-08-06T08:13:29Z', 1981, 'color: green'], 
 
    ['2016-08-06T08:14:08Z', 1986.9, 'color: yellow'], 
 
    ['2016-08-06T08:14:22Z', 1988.9, 'color: green'], 
 
    ['2016-08-06T08:14:25Z', 1989.2, 'color: green'], 
 
    ['2016-08-06T08:14:29Z', 1989.7, 'color: yellow'], 
 
    ['2016-08-06T08:14:32Z', 1990.1, 'color: green'], 
 
    ]); 
 
    var options = { 
 
    chart: { 
 
     title: 'Elevation Chart', 
 
    }, 
 
    //bars: 'vertical' /* This option isn't required for "Classic" column chart */ 
 
    }; 
 

 
    /* Create a "Classic" Google Visualization Column Chart */ 
 
    var material = new google.visualization.ColumnChart(document.getElementById('chart_div')); 
 
    material.draw(data, options); 
 
}

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

Related SO question #1

Related SO question #2

Answer 2

あなたはBar Chartsが垂直になりたい場合は、Column Chartを使用しています。 縦棒グラフの横バージョンは棒グラフです。あなたが作成しているgoogle.charts.Bar(...)オブジェクトは、Googleが材質チャートを呼ぶものであるため、

この

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

 
function drawDualX() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['Date', 'Elevation', { 
 
     role: 'style' 
 
    }], 
 
    ["2016-08-06T08:09:47Z", 1977.4, "color: yellow"], 
 
    ["2016-08-06T08:13:29Z", 1981, "color: green"], 
 
    ["2016-08-06T08:14:08Z", 1986.9, "color: yellow"], 
 
    ["2016-08-06T08:14:22Z", 1988.9, "color: green"], 
 
    ["2016-08-06T08:14:25Z", 1989.2, "color: green"], 
 
    ["2016-08-06T08:14:29Z", 1989.7, "color: yellow"], 
 
    ["2016-08-06T08:14:32Z", 1990.1, "color: green"], 
 
    ]); 
 

 
    var view = new google.visualization.DataView(data); 
 
    view.setColumns([0, 1, { 
 
     calc: "stringify", 
 
     sourceColumn: 1, 
 
     type: "string", 
 
     role: "annotation" 
 
    }, 
 
    2 
 
    ]); 
 

 
    var options = { 
 
    title: "Elevation Chart", 
 
    width: 600, 
 
    height: 400, 
 
    bar: { 
 
     groupWidth: "95%" 
 
    }, 
 
    legend: { 
 
     position: "none" 
 
    }, 
 
    }; 
 
    var material = new google.visualization.ColumnChart(document.getElementById("chart_div")); 
 
    material.draw(view, options); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"> 
 
</div>