google charts issue with annotation role :true make dynamic not working using dataview

问题

How can I add labels on every column using annotations true outside as add dynamically get a price on every column.

I want to implement label on every column as price with $sign . I try with data view but only get static way using data view.

How can I do it can u suggests me some hint or implement dynamic way possible ?

google.charts.load('current', {
  packages: ['corechart']
  }).then(function () {
  var charts = {};
  var options = {
    Column: {
      chartArea: {
        height: '100%',
        width: '100%',
        top: 24,
        left: 64,
        right: 32,
        bottom: 48,
      },
      'vAxis': { 
        title: 'Cost in USD ($)', format:'$#',
      },
      height: '100%',
      legend: {
        position: 'bottom'
      },
      width: '100%'
    }
    };
  //  columns charts data
var jsonData = [["product1",450],["product2",23],["product3",1008.0],["product4",1008.0],["product",108.0],["product7",1008.0],["product4",10.0],["product6",10.0],["product9",10.0],["product5",108.0],["product10",1.0]];
  loadData(jsonData, '1', 'Column');
  
  // load json data
  function loadData(jsonData, id, chartType) {
    // create data table
    var dataTable = new google.visualization.DataTable();
  
       // add date column
       dataTable.addColumn('string', 'Category');
       var rowIndex = dataTable.addRow();
       dataTable.setValue(rowIndex, 0, dataTable.getColumnLabel(0));
       $.each(jsonData, function(productIndex, product) {
        var colIndex = dataTable.addColumn('number', product[0]);
          // add product data
          dataTable.setValue(rowIndex, colIndex, product[1]);
        });
         // draw chart
    $(window).resize(function () {
      drawChart(id, dataTable);
    });
    drawChart(id, dataTable);
  }
  
  
   
   
    function getDataView(dataTable) {
    var dataView;
    var viewColumns = [];

    for (var i = 0; i < dataTable.getNumberOfColumns(); i++) {
      addViewColumn(i);
    }

    function addViewColumn(index) {
      viewColumns.push(index);
      if (index > 0) {
        viewColumns.push({
           calc: function (dt, row) {
           return dt.getFormattedValue(row, index) ;
          },
           sourceColumn: index,
             type: 'string',
             role: 'annotation'
        });
      }
    }

    dataView = new google.visualization.DataView(dataTable);
    dataView.setColumns(viewColumns);
    return dataView;
  }
  

 
  var formatter = new google.visualization.NumberFormat(
    {prefix: '$'});
  formatter.format(dataTable);
  // draw chart
 function drawChart(id, dataTable) {
  
    if (!charts.hasOwnProperty(id)) {
     
      charts[id] = new google.visualization.ChartWrapper({
        chartType: 'Column' + 'Chart',
        containerId: 'chart-' + id,
        options:  {
        'vAxis': { 
          title: 'Cost in USD ($)', format:'$#',
        }, 
         width: '100%',
         height: '100%',
         legend: {
        position: 'bottom'
      },
    },
      });
    }
   var view = getDataView(dataTable);
    charts[id].setDataTable(view);
    charts[id].draw(view.toDataTable(),options);
  }
});

html, body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  overflow: hidden;
  padding: 0px 0px 0px 0px;
}

.chart {
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="chart" id="chart-1"></div>

回答1:

use the view to draw the chart

try changing...

charts[id].setDataTable(dataTable);

to...

charts[id].setDataTable(view);

EDIT

to ensure the view has access to the data table,
create the view in the drawChart function...

function drawChart(id, dataTable) {
  if (!charts.hasOwnProperty(id)) {
    charts[id] = new google.visualization.ChartWrapper({
      chartType: 'Column' + 'Chart',
      containerId: 'chart-' + id,
      options:  {
      'vAxis': { 
        title: 'Cost in USD ($)', format:'$#',
      }, 
       width: '100%',
       height: '100%',
       legend: {
          position: 'bottom'
        },
      },
    });
  }

  var view = new google.visualization.DataView(dataTable);
  view.setColumns([0,
    1,
    {
      calc: "stringify",
      sourceColumn: 1,
      type: "string",
      role: "annotation"
    },
    2,
    {
      calc: "stringify",
      sourceColumn: 2,
      type: "string",
      role: "annotation"
    },

  ]);

  charts[id].setDataTable(view);
  charts[id].draw(view, options);
}

EDIT 2

no arguments should be passed to the draw function when drawing a chart wrapper
that's only for a regular chart

charts[id].draw(view.toDataTable(),options);

should be...

charts[id].draw();

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var charts = {};
  var options = {
    Column: {
      chartArea: {
        height: '100%',
        width: '100%',
        top: 24,
        left: 64,
        right: 32,
        bottom: 48,
      },
      'vAxis': {
        title: 'Cost in USD ($)', format:'$#',
      },
      height: '100%',
      legend: {
        position: 'bottom'
      },
      width: '100%'
    }
    };
  //  columns charts data
  var jsonData = [["product1",450],["product2",23],["product3",1008.0],["product4",1008.0],["product",108.0],["product7",1008.0],["product4",10.0],["product6",10.0],["product9",10.0],["product5",108.0],["product10",1.0]];
  loadData(jsonData, '1', 'Column');

  // load json data
  function loadData(jsonData, id, chartType) {
    // create data table
    var dataTable = new google.visualization.DataTable();

       // add date column
       dataTable.addColumn('string', 'Category');
       var rowIndex = dataTable.addRow();
       dataTable.setValue(rowIndex, 0, dataTable.getColumnLabel(0));
       $.each(jsonData, function(productIndex, product) {
        var colIndex = dataTable.addColumn('number', product[0]);
          // add product data
          dataTable.setValue(rowIndex, colIndex, product[1]);
        });
         // draw chart
    $(window).resize(function () {
      drawChart(id, dataTable);
    });
    drawChart(id, dataTable);
  }




    function getDataView(dataTable) {
    var dataView;
    var viewColumns = [];

    for (var i = 0; i < dataTable.getNumberOfColumns(); i++) {
      addViewColumn(i);
    }

    function addViewColumn(index) {
      viewColumns.push(index);
      if (index > 0) {
        viewColumns.push({
           calc: function (dt, row) {
           return dt.getFormattedValue(row, index) ;
          },
           sourceColumn: index,
             type: 'string',
             role: 'annotation'
        });
      }
    }

    dataView = new google.visualization.DataView(dataTable);
    dataView.setColumns(viewColumns);
    return dataView;
  }

  var formatter = new google.visualization.NumberFormat({prefix: '$'});
  formatter.format(dataTable);

  function drawChart(id, dataTable) {
    if (!charts.hasOwnProperty(id)) {
      charts[id] = new google.visualization.ChartWrapper({
        chartType: 'ColumnChart',
        containerId: 'chart-' + id,
        options:  {
          vAxis: {
            title: 'Cost in USD ($)',
            format: '$#',
          },
          width: '100%',
          height: '100%',
          legend: {
            position: 'bottom'
          },
        },
      });
    }
    var view = getDataView(dataTable);
    charts[id].setDataTable(view);
    charts[id].draw();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart-1"></div>

来源：https://stackoverflow.com/questions/50789740/google-charts-issue-with-annotation-role-true-make-dynamic-not-working-using-da