Jquery google图表与注释角色存在问题：true使用dataview使动态不起作用

如何在每一列上添加标签，使用注释true outside as add动态获取每一列的价格

我想在每一列上实现带有

$

符号的价格标签。 我尝试使用数据视图，但只使用数据视图获得静态方式

我该怎么做呢？你能给我一些提示吗？或者尽可能实现动态方式吗

google.charts.load（'current'{
软件包：['corechart']
}).然后（函数（）{
var图={}；
变量选项={
专栏：{
图表区：{
高度：“100%”，
宽度：“100%”，
排名：24，
左：64，
右：32，
底图：48，
},
'vAxis'：{
标题：“成本单位为美元（$）”，格式：“$#”，
},
高度：“100%”，
图例：{
位置：'底部'
},
宽度：“100%”
}
};
//列图表数据
var jsonData=[“产品1”，450]，“产品2”，23]，“产品3”，1008.0]，“产品4”，1008.0]，“产品”108.0]，“产品7”，1008.0]，“产品4”，10.0]，“产品6”，10.0]，“产品9”，10.0]，“产品5”，108.0]，“产品10”，1.0]；
loadData（jsonData，'1'，'Column'）；
//加载json数据
函数loadData（jsonData、id、chartType）{
//创建数据表
var dataTable=new google.visualization.dataTable（）；
//添加日期列
addColumn（'string'，'Category'）；
var rowIndex=dataTable.addRow（）；
setValue（rowIndex，0，dataTable.getColumnLabel（0））；
$.each（jsonData，函数（productIndex，product）{
var colIndex=dataTable.addColumn（'number'，product[0]）；
//添加产品数据
setValue（rowIndex，colIndex，product[1]）；
});
//绘制图表
$（窗口）。调整大小（函数（）{
图纸（id、数据表）；
});
图纸（id、数据表）；
}
函数getDataView（dataTable）{
var数据视图；
var viewColumns=[]；
对于（var i=0；i0）{
viewColumns.push({
计算：函数（dt，行）{
返回dt.getFormattedValue（行、索引）；
},
sourceColumn:索引，
键入：“字符串”，
角色：“注释”
});
}
}
dataView=新的google.visualization.dataView（dataTable）；
setColumns（viewColumns）；
返回数据视图；
}
var formatter=new google.visualization.NumberFormat(
{前缀：'$'}）；
formatter.format（数据表）；
//绘制图表
功能绘图图（id，数据表）{
如果（！charts.hasOwnProperty（id））{
charts[id]=新的google.visualization.ChartWrapper({
图表类型：“列”+“图表”，
集装箱：“图表-”+id，
选项：{
'vAxis'：{
标题：“成本单位为美元（$）”，格式：“$#”，
}, 
宽度：“100%”，
高度：“100%”，
图例：{
位置：'底部'
},
},
});
}
var view=getDataView（dataTable）；
图表[id]。setDataTable（视图）；
图表[id]。绘制（view.toDataTable（），选项）；
}
});
html，正文{
身高：100%；
保证金：0px 0px 0px 0px；
溢出：隐藏；
填充：0px 0px 0px 0px；
}
.图表{
身高：100%；
}
使用视图绘制图表

尝试改变

charts[id].setDataTable(dataTable);

到

charts[id].setDataTable(view);

编辑

为确保视图可以访问数据表，

在
绘图图
功能中创建视图

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);
}

编辑2

绘制图表包装时，不应向
draw
函数传递任何参数

这只适用于常规图表

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

应该是

charts[id].draw();

请参阅以下工作片段


google.charts.load（'current'{
软件包：['corechart']
}).然后（函数（）{
var图={}；
变量选项={
专栏：{
图表区：{
高度：“100%”，
宽度：“100%”，
排名：24，
左：64，
右：32，
底图：48，
},
“vAxis”：{
标题：“成本单位为美元（$）”，格式：“$#”，
},
高度：“100%”，
图例：{
位置：'底部'
},
宽度：“100%”
}
};
//列图表数据
var jsonData=[“产品1”，450]，“产品2”，23]，“产品3”，1008.0]，“产品4”，1008.0]，“产品”108.0]，“产品7”，1008.0]，“产品4”，10.0]，“产品6”，10.0]，“产品9”，10.0]，“产品5”，108.0]，“产品10”，1.0]；
loadData（jsonData，'1'，'Column'）；
//加载json数据
函数loadData（jsonData、id、chartType）{
//创建数据表
var dataTable=new google.visualization.dataTable（）；
//添加日期列
addColumn（'string'，'Category'）；
var rowIndex=dataTable.addRow（）；
setValue（rowIndex，0，dataTable.getColumnLabel（0））；
$.each（jsonData，函数（productIndex，product）{
var colIndex=dataTable.addColumn（'number'，product[0]）；
//添加产品数据
setValue（rowIndex，colIndex，product[1]）；
});
//绘制图表
$（窗口）。调整大小（函数（）{
图纸（id、数据表）；
});
图纸（id、数据表）；
}
函数getDataView（dataTable）{
var数据视图；
var viewColumns=[]；
对于（var i=0；i0）{
viewColumns.push({
计算：函数（dt，行）{
返回dt.getFormattedValue（行、索引）；
},
sourceColumn:索引，
键入：“字符串”，
角色：“注释”
});
}
}
dataView=新的google.visualization.dataView（dataTable）；
setColumns（viewColumns）；
返回数据视图；
}
风险值