Fatal编程技术网
  • charts/
  • 我正在谷歌条形图上工作，我一直在为各个条形图添加颜色 我的网页 //加载谷歌图表 load（'current'，{'packages'：['corechart']}）； google.charts.setOnLoadCallback（drawChart）； //绘制图表并设置图表值 变量a=[[Work'，8]，[Eat'，2]，[TV'，4]，[Gym'，2]，[Sleep'，8]，[walk'，2]，[games'，2]，[chess'，2]，[drink'，4]，[dance'，6]； a、 排序（比较第二列）； 函数比较第二列（a、b）{ 如果（a[1]==b[1]）{ 返回0； } 否则{ 返回（a[1]>b[1]）？-1:1； } } //绘制图表并设置图表值 函数绘图图（）{ var data=google.visualization.arrayToDataTable([ ['Task'，'Hours per Day']，a[0]，a[1]，a[2]，a[3]，a[4] ]); //可选；添加标题并设置图表的宽度和高度 var options={'title'：'thetitle'，'width'：550'，'height'：400}； //使用id=“piechart”在元素内显示图表 var chart=new google.visualization.ColumnChart（document.getElementById（'piechart'）； 图表绘制（数据、选项）； }

我正在谷歌条形图上工作，我一直在为各个条形图添加颜色 我的网页 //加载谷歌图表 load（'current'，{'packages'：['corechart']}）； google.charts.setOnLoadCallback（drawChart）； //绘制图表并设置图表值 变量a=[[Work'，8]，[Eat'，2]，[TV'，4]，[Gym'，2]，[Sleep'，8]，[walk'，2]，[games'，2]，[chess'，2]，[drink'，4]，[dance'，6]； a、 排序（比较第二列）； 函数比较第二列（a、b）{ 如果（a[1]==b[1]）{ 返回0； } 否则{ 返回（a[1]>b[1]）？-1:1； } } //绘制图表并设置图表值 函数绘图图（）{ var data=google.visualization.arrayToDataTable([ ['Task'，'Hours per Day']，a[0]，a[1]，a[2]，a[3]，a[4] ]); //可选；添加标题并设置图表的宽度和高度 var options={'title'：'thetitle'，'width'：550'，'height'：400}； //使用id=“piechart”在元素内显示图表 var chart=new google.visualization.ColumnChart（document.getElementById（'piechart'）； 图表绘制（数据、选项）； }

charts colors google-visualization

我正在谷歌条形图上工作，我一直在为各个条形图添加颜色 我的网页 //加载谷歌图表 load（'current'，{'packages'：['corechart']}）； google.charts.setOnLoadCallback（drawChart）； //绘制图表并设置图表值 变量a=[[Work'，8]，[Eat'，2]，[TV'，4]，[Gym'，2]，[Sleep'，8]，[walk'，2]，[games'，2]，[chess'，2]，[drink'，4]，[dance'，6]； a、 排序（比较第二列）； 函数比较第二列（a、b）{ 如果（a[1]==b[1]）{ 返回0； } 否则{ 返回（a[1]>b[1]）？-1:1； } } //绘制图表并设置图表值 函数绘图图（）{ var data=google.visualization.arrayToDataTable([ ['Task'，'Hours per Day']，a[0]，a[1]，a[2]，a[3]，a[4] ]); //可选；添加标题并设置图表的宽度和高度 var options={'title'：'thetitle'，'width'：550'，'height'：400}； //使用id=“piechart”在元素内显示图表 var chart=new google.visualization.ColumnChart（document.getElementById（'piechart'）； 图表绘制（数据、选项）； },charts,colors,annotations,google-visualization,bar-chart,Charts,Colors,Annotations,Google Visualization,Bar Chart,我使用的是条形图，它只显示默认的蓝色 我使用了一个数组来删除没有数据的列（如0） 比如对数据进行排序 我想为每列显示单独的颜色 像红色、绿色一样，每个酒吧都有不同的颜色 我也喜欢添加注释 提前谢谢 以上评论中的列标题和值在这里似乎工作正常 唯一的改变是 将type属性添加到样式和注释角色 为样式角色添加了不同的颜色 请参阅以下工作片段 var a=[[Work'，8，“#E53935”，8]，“Eat'，2，“#1E88E5'，2]，“TV'，4，“#43A047”，4]； a、 排序（比较第

  • 我使用的是条形图，它只显示默认的蓝色
  • 我使用了一个数组来删除没有数据的列（如0）
  • 比如对数据进行排序
  • 我想为每列显示单独的颜色
  • 像红色、绿色一样，每个酒吧都有不同的颜色
  • 我也喜欢添加注释
  • 提前谢谢
    • 以上评论中的列标题和值在这里似乎工作正常

    唯一的改变是

  • 将
    type
    属性添加到样式和注释角色
  • 为样式角色添加了不同的颜色
    • 请参阅以下工作片段

    var a=[[Work'，8，“#E53935”，8]，“Eat'，2，“#1E88E5'，2]，“TV'，4，“#43A047”，4]；
a、 排序（比较第二列）；
函数比较第二列（a、b）{
如果（a[1]==b[1]）{
返回0；
}
否则{
返回（a[1]>b[1]）？-1:1；
}
}
google.charts.load（'current'{
软件包：['corechart']
}).then（函数图（）{
var data=google.visualization.arrayToDataTable([
['Task'，'Hours per Day'，{role:'style'，type:'string'}，{role:'annotation'，type:'number'}]，a[0]，a[1]，a[2]
]);
变量选项={
标题：“标题”，
宽度：550，
身高：400，
图例：“无”
};
var chart=new google.visualization.ColumnChart（document.getElementById（'piechart'）；
图表绘制（数据、选项）；
});

    

    检查这个答案的颜色-->——对于注释，我尝试添加['Task'、'Hours per Day'、{role:'style}和{role:'annotation'}]a[0]、a[1]、a[2]、a[3]、a[4]，然后它还显示bluevar a=[[Work]，8、'b87333'，8]、'Eat'，2、'b87333 2]、'TV'，4]。]

    <!DOCTYPE html>
<html lang="en-US">
<body>

<h1>My Web Page</h1>

<div id="piechart"></div>

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

<script type="text/javascript">
// Load google charts
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

// Draw the chart and set the chart values


var a = [['Work', 8], ['Eat', 2], ['TV', 4], ['Gym', 2], ['Sleep', 8], ['walk', 2], ['games', 2], ['chess', 2], ['drink', 4], ['dance', 6]];
a.sort(compareSecondColumn);

function compareSecondColumn(a, b) {
    if (a[1] === b[1]) {
        return 0;
    }
    else {
        return (a[1] > b[1]) ? -1 : 1;
    }
}



// Draw the chart and set the chart values
function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Task', 'Hours per Day'],a[0],a[1],a[2],a[3],a[4]
        
    ]);
    // Optional; add a title and set the width and height of the chart
    var options = { 'title': 'the title', 'width': 550, 'height': 400 };
    // Display the chart inside the <div> element with id="piechart"
    var chart = new google.visualization.ColumnChart(document.getElementById('piechart'));
    chart.draw(data, options);
}

</script>

</body>
</html>