具有值的条形图

Question

你好，我希望你能看到这个，我对此有疑问当我添加这个

type: 'string',  
role: 'style',
calc: 'stringify',
sourceColumn: 1,
role: 'annotation'

它正在工作并在条形图上显示值，但它为我提供了所有具有一种颜色的条形。看到我的剧本，你就会站起来谢谢 ：）它可以正常工作并在条形图上显示其值，但是它为我提供了一种颜色的所有条形。看到我的剧本，你就会站起来谢谢：）

  <script type="text/javascript">
google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
    var options = {
        title: 'Suivi GTR',
        width: 1200,
        height: 500,
        bar: { groupWidth: "95%" },
        seriesType: 'bars',
        series: { 5: { type: 'line' } },
        colors: ['#ff7900', '#50be87', '#4bb4e6'],
        legend: 'none',

    };


    $.ajax({
        type: "POST",
        url: "SuiviGTR.aspx/GetChartData",
        data: '{}',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (r) {
            var data = google.visualization.arrayToDataTable(r.d);
            var view = new google.visualization.DataView(data);

            view.setColumns([
              0, 1, {
                calc: function (dt, row) {
                  var category = dt.getValue(row, 0);
                  var color;
                  switch (category) {
                    case 'encours':
                          color = '#ff7900';

                      break;

                    case 'gele':
                          color = '#50be87';

                      break;

                    case 'clos':
                          color = '#4bb4e6';

                      break;
                  }
                  return color;
                },
                type: 'string',
                role: 'style',
                calc: 'stringify',
                 sourceColumn: 1,
                 role: 'annotation'




              }
            ]);


            var chart = new google.visualization.BarChart($("#chart_div")[0]);
            chart.draw(view, options);
        },
        failure: function (r) {
            alert(r.d);
        },
        error: function (r) {
            alert(r.d);
        }
    });
}
</script>

Answer 1

如果您要使用样式和注释角色，您需要两个计算列...

view.setColumns([
  0, 1, {
    calc: function (dt, row) {
      var category = dt.getValue(row, 0);
      var color;
      switch (category) {
        case 'encours':
              color = '#ff7900';

          break;

        case 'gele':
              color = '#50be87';

          break;

        case 'clos':
              color = '#4bb4e6';

          break;
      }
      return color;
    },
    type: 'string',
    role: 'style'
  }, {
    calc: 'stringify',
    sourceColumn: 1,
    role: 'annotation',
    type: 'string'
  }
]);