谷歌图表颜色个别酒吧

我已经使用了盒子里的所有技巧。阅读完所有帮助文章后，我发现我认为这段代码实际上应该可以工作。但它从不为我的酒吧彩色编码。我究竟做错了什么？谷歌图表颜色个别酒吧

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

谷歌图表颜色个别酒吧

回答

相关问题