首页 > 解决方案 > 在栏内获取注释 - Google Charts Material

问题描述

有没有办法像 Google Charts Classic 一样在栏中获取注释?我使用谷歌材料图表只是为了让它堆叠以及多轴。

也可以让每一列有不同的颜色。例如,汽车-汽油-红色、汽车-电动-蓝色、卡车-汽油-橙色、卡车-电动-灰色?

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

google.setOnLoadCallback(drawStuff);

function drawStuff() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Difference');
    data.addColumn('number', 'Gas');
    data.addColumn('number', 'Gas');
    data.addColumn('number', 'Gas');
    data.addColumn('number', 'Electric');
    data.addColumn('number', 'Electric');
    data.addColumn('number', 'Electric');
    data.addRows([
        ['Car', 216, 319, 190, 20, 14, 40],
        ['Truck', 390, 194, 239, 13, 23, 45]
    ]);


    // Set chart options
    var options = {
        isStacked: true,
        legend: { position: "none" },
        width: 500,
        height: 800,
        
        chart: {
            title: 'title'
        },
vAxes: { 
  0:{viewWindow: {max: 1600} }, 
  1:{viewWindow: {max: 90}}
      },
        series: {
            0: {targetAxisIndex: 0},
            1: {targetAxisIndex: 0},
            2: {targetAxisIndex: 0},
            3: {targetAxisIndex: 1},
            4: {targetAxisIndex: 1},
            5: {targetAxisIndex: 1}
        }
    };

    var chart = new google.charts.Bar(document.getElementById('chart_div'));
    chart.draw(data, google.charts.Bar.convertOptions(options));
};
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

标签: google-visualization

解决方案


推荐阅读