谷歌圖表顏色個別酒吧

我已經使用了盒子裏的所有技巧。閱讀完所有幫助文章後，我發現我認爲這段代碼實際上應該可以工作。但它從不爲我的酒吧彩色編碼。我究竟做錯了什麼？谷歌圖表顏色個別酒吧

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>

來源

2016-08-31 Ursin Saluz

[這裏是你的選擇一個更好的解釋（http://stackoverflow.com/a/36452554/5090771） - 如果你需要一個_actual的材料chart_（'.Bar'） - 見圖4 - 只需要將行轉換爲列，然後使用'colors'配置選項... – WhiteHat

的原因，這是不工作是因爲google.charts.Bar(...)對象正在創建什麼是谷歌稱之爲資料圖。這是一個完全重新設計的Google Visualization API實現，與他們所稱的「Classic」圖表包完全不同，目前它仍處於測試階段。這裏有很多相關的問題（見下文），看起來列表角色（如您在此用於指定'color'）尚未支持材料圖表。

如果您想爲每個數據點使用自定義樣式，則必須使用舊版（但更好支持）Google可視化「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 #2

來源

2016-08-31 08:10:10 awenborn

如果你想Bar Charts是垂直的，使用Column Chart。柱形圖的橫向版本是條形圖。

試試這個

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>

來源

2016-08-31 08:06:32

谷歌圖表顏色個別酒吧

回答

相關問題