我试图用小提琴Code to use a CategoryFilter as a column selector by Andrew Gallant在Google Charts-LineChart中创建CategoryFilter。
我得到的错误是：
“一个或多个参与者未能绘制（）”＆
“无效的列标签：colLabel”
除了摆弄小提琴之外，我还从ASP.NET中的SQL连接获取图表数据。
什么地方出了错？
重要的javascript函数如下所示：
function drawchart(chartData) {
var data = new google.visualization.DataTable();
for (var index in chartData.Columns) {
data.addColumn('number', chartData.Columns[index]);
}
data.addRows(chartData.Data);
var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));
var chart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'chart_div',
dataTable: data,
});
var columnsTable = new google.visualization.DataTable();
columnsTable.addColumn('number', 'colIndex');
columnsTable.addColumn('string', 'colLabel');
var initState = {
selectedValues: []
};
for (var i = 1; i < data.getNumberOfColumns() ; i++) {
columnsTable.addRow([i, data.getColumnLabel(i)]);
initState.selectedValues.push(data.getColumnLabel(i));
}
var distributors = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'distributors_div',
dataTable: columnsTable,
options: {
filterColumnLabel: 'colLabel',
ui: {
label: 'Columns',
allowTyping: false,
allowMultiple: true,
allowNone: false,
selectedValuesLayout: 'belowStacked'
}
},
state: initState
});
function setChartView(wrapper) {
wrapper.setOption('height', 720);
wrapper.setOption('width', 1280);
var state = distributors.getState();
var row;
var view = {
columns: [0]
};
for (var i = 0; i < state.selectedValues.length; i++) {
row = columnsTable.getFilteredRows([{
column: 1,
value: state.selectedValues[i]
}])[0];
view.columns.push(columnsTable.getValue(row, 0));
}
// sort the indices into their original order
view.columns.sort(function (a, b) {
return (a - b);
});
chart.setView(view);
chart.draw();
}
google.visualization.events.addListener(distributors, 'statechange', setChartView);
setChartView(chart);
dash.bind(distributors, chart);
dash.draw(data);
}
提供如下数据的C＃代码：
[WebMethod]
public static ChartOutput GetChartData()
{
using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionString"].ToString()))
{
SqlCommand cmd = new SqlCommand("Usp_Getdata3", con);
cmd.CommandType = CommandType.StoredProcedure;
SqlDataAdapter da = new SqlDataAdapter();
da.SelectCommand = cmd;
DataTable dt = new DataTable();
da.Fill(dt);
List<ChartDetails> dataList = new List<ChartDetails>();
foreach (DataRow dtrow in dt.Rows)
{
ChartDetails details = new ChartDetails();
details.WeekNumber = Convert.ToInt16(dtrow[0]);
details.DistributorName = dtrow[1].ToString();
details.Count = Convert.ToUInt16(dtrow[2]);
dataList.Add(details);
}
ChartOutput output = new ChartOutput();
output.Data = new List<int[]>();
output.Columns = new List<string>();
var orderedListOfDistributorNames = dataList.Select(x => x.DistributorName).Distinct().OrderBy(x => x).ToArray();
output.Columns.Add("WeekNumber");
output.Columns.AddRange(orderedListOfDistributorNames);
var weekGrouping = dataList.GroupBy(k => k.WeekNumber, v => v);
foreach (var g in weekGrouping)
{
var n = output.Columns.Count;
int[] dataRow = new int[n];
var currentWeekNumber = g.Key;
dataRow[0] = currentWeekNumber;
for (int i = 0; i < orderedListOfDistributorNames.Count(); i++)
{
var distrtibutorToCheck = orderedListOfDistributorNames[i];
var distributorFromGrouping = g.FirstOrDefault(x => x.DistributorName == distrtibutorToCheck);
if (distributorFromGrouping != null)
dataRow[i + 1] = distributorFromGrouping.Count;
}
output.Data.Add(dataRow);
}
return output;
}
}
public class ChartOutput
{
public List<string> Columns { get; set; }
public List<int[]> Data { get; set; }
}
public class ChartDetails
{
public string DistributorName { get; set; }
public int WeekNumber { get; set; }
public int Count { get; set; }
}
参考方案
首先，Gallant示例不使用仪表板。
每个控件分别绘制。
使用仪表板将覆盖“图表和控件包装”上的dataTable定义。
在这里将它们都设置为相同的DataTable-> dash.draw(data);
从而导致-> Invalid column label:colLabel
另外，ControlWrapper上的'statechange'事件不会将任何参数传递给回调函数。
从事件中调用wrapper的setChartView参数将不存在...
最后，尽管问题中未显示它，但我还是建议loading Google Charts
使用loader.js与jsapi
由于recent problems，将'current'替换为版本'44'
我是新手，正在写这篇文章，但是如果源上没有图像，那么我只有空白。有人可以告诉我，如果我正在获取背景图像，如何获取/images/no-image.jpg：url（）;这是我的代码：<div class="uk-clearfix uk-position-relative"> <div class="recipeb…
Javascript IF语句 - javascript嗨，我有这段代码可以正常工作，并将两个日历显示为一个日历。我还有一个php变量$login_session，其中包含登录电子邮件地址的用户。关于如何显示[email protected]日历的任何想法（伪代码）IF $login_session == "[email protected]&#…
提交初始化后删除某些帖子数据 - javascript在初始化提交之后但在将数据发送到处理页面之前，是否可以过滤$ _POST表单数据？我想象过程的方式：提交->收集$ _POST数据->发送数据我想做的事：提交->收集$ _POST数据->删除某些元素->发送数据这样就不必更改处理页面以过滤掉不希望接收的元素了吗？ javascript大神给出的解决方案 当然可以，您可以在JS …
Javascript历史记录。如果不是当前站点，请默认转到页面 - javascript我在搜索结果中使用以下history.go，并具有跨浏览器可接受的结果。我希望使用PHP解决方案，但这会满足需求，直到我意识到一个更大的问题。<a href="javascript:history.go(-1)">Return To Search Results</a> 我唯一的问题是查看者来自不是源自搜索页面ht…
获取JavaScript值到C＃字符串 - javascript是否可以在C＃中执行类似的操作？该值为“ 10/05/2014”string jsValue = javascript("$('#EstimatedStartDate').val()"); 参考方案 您能否更详细地阐明您要做什么。看来您正在尝试从javascript（客户…