如何配置NumberRangeFilter属性（谷歌可视化）？
我是Google Visualization和JS的新手。我设法编写以下代码来开发时间间隔数据可视化工具。但我想在现有代码中进行更多修改，因此在此寻求帮助。
分享以下代码：
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
callback: drawVisualization,
packages:['controls', 'table', 'timeline']
});
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard'));
var control = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'control',
'options': {
'hAxis':{'slantedText':'true','direction':'1','format': { 'pattern':'0' }},
'hAxis.gridlines.color':'#ccc',
'hAxis': {
gridlines: {
color: 'transparent'
}
},
'filterColumnLabel': 'Start',
'ui': {
'format': {
'pattern': 0
},
'labelStacking': 'horizontal'
}
}
});
var stringControl = new google.visualization.ControlWrapper({
'controlType': 'StringFilter',
'containerId': 'stringControl',
'options': {
'hAxis':{'slantedText':'true','direction':'1','format': { 'pattern':'0' }},
'hAxis.gridlines.color':'#ccc',
'hAxis': {
gridlines: {
color: 'transparent'
}
},
'filterColumnLabel': 'P',
'matchType': 'any',
'ui': {
'format': {
'pattern': 0
},
'labelStacking': 'horizontal'
}
}
});
var chart = new google.visualization.ChartWrapper({
chartType: 'Timeline',
containerId: 'chart',
options: {
'width': 1200,
'height': 600,
'timeline': {
'rowLabelStyle': {
'fontName': 'Helvetica',
'fontSize': 16,
'color': '#603913',
},
'barLabelStyle': {
'fontName': 'Garamond',
'fontSize': 9
}
},
'labelStacking': 'horizontal', 'format': { 'pattern':'####','fractionDigits':'0','groupingSymbol':'','showRangeValues':true },
backgroundColor: '#ffd',
hAxis: {
minValue: 0,
},
'chartArea': {
width: '100%', // make sure this is the same for the chart and control so the axes align right
height: '100%'
},
},
'view': {
'columns': [0, 1, 2, 3, 4]
},
});
var table = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'table'
});
var data = new google.visualization.arrayToDataTable([
// ###### Data Should be placed here ######
['P', 'Task', 'Msg', 'Start', 'End'],
['Type1' , 'Type1_data' , '' ,1 ,2],
['P2_1' , 'Check_2_data' , 'my_index 0 new_index 0' ,101 ,102],
['P2_1' , 'Check_4_data' , 'my_index 0 new_index 0 asdjam adasd' ,102 ,107],
['Type1' , 'Check_3_data' , 'intr_status 1024' ,103 ,104],
['Type_2' , '' , 'p 2 g 1 my_index 0 new_index 0 complete' ,105 ,106],
['Type1' , 'Check_3_data' , 'intr_status 4' ,11 ,12],
['Type1' , 'Check_3_data' , 'intr_status 4' ,111 ,113],
['Type1' , 'Type1_data' , '' ,114 ,125],
['P3_0' , 'Check_2_data' , 'my_index 0 new_index 0 asdhas asdhasd' ,116 ,117],
['P3_0' , 'Check_4_data' , 'my_index 0 new_index 0' ,117 ,122],
['Type1' , 'Check_3_data' , 'intr_status 1024' ,118 ,119],
['Type_2' , '' , 'p 3 g 0 my_index 0 new_index 0 complete' ,120 ,121],
['Type1' , 'Check_3_data' , 'intr_status 4' ,126 ,128],
['Type1' , 'Type1_data' , '' ,129 ,140],
['Type1' , 'Type1_data' , '' ,13 ,14],
['P4_0' , 'Check_2_data' , 'my_index 0 new_index 0' ,131 ,132],
['P4_0' , 'Check_4_data' , 'my_index 0 new_index 0' ,132 ,137],
['Type1' , 'Check_3_data' , 'intr_status 1024' ,133 ,134],
['Type_2' , '' , 'p 4 g 0 my_index 0 new_index 0 complete' ,135 ,136],
['Type1' , 'Check_3_data' , 'intr_status 4' ,15 ,17],
['Type1' , 'Type1_data' , '' ,18 ,20],
['Type1' , 'Check_3_data' , 'intr_status 4' ,21 ,22],
['Type1' , 'Type1_data' , '' ,23 ,24],
['Type1' , 'Check_3_data' , 'intr_status 4' ,25 ,27],
['Type1' , 'Type1_data' , '' ,28 ,29],
['Type1' , 'Check_3_data' , 'intr_status 4' ,3 ,4],
['Type1' , 'Check_3_data' , 'intr_status 4' ,30 ,31],
['Type1' , 'Type1_data' , '' ,32 ,34],
['Type1' , 'Check_3_data' , 'intr_status 4' ,35 ,36],
['Type1' , 'Type1_data' , '' ,37 ,38],
['Type1' , 'Check_3_data' , 'intr_status 4' ,39 ,41],
['Type1' , 'Type1_data' , '' ,42 ,43],
['Type1' , 'Check_3_data' , 'intr_status 4' ,44 ,45],
['Type1' , 'Type1_data' , '' ,46 ,48],
['Type1' , 'Check_3_data' , 'intr_status 4' ,49 ,51],
['Type1' , 'Type1_data' , '' ,5 ,6],
['Type1' , 'Type1_data' , '' ,52 ,54],
['Type1' , 'Check_3_data' , 'intr_status 4' ,55 ,57],
['Type1' , 'Type1_data' , '' ,58 ,69],
['P0_0' , 'Check_2_data' , 'my_index 0 new_index 0' ,60 ,61],
['P0_0' , 'Check_4_data' , 'my_index 0 new_index 0' ,61 ,66],
['Type1' , 'Check_3_data' , 'intr_status 1024' ,62 ,63],
['Type_2' , '' , 'p 0 g 0 my_index 0 new_index 0 complete' ,64 ,65],
['Type1' , 'Check_3_data' , 'intr_status 4' ,7 ,8],
['Type1' , 'Check_3_data' , 'intr_status 4' ,70 ,72],
['Type1' , 'Type1_data' , '' ,73 ,95],
['P1_0' , 'Check_2_data' , 'my_index 0 new_index 0' ,76 ,79],
['P2_0' , 'Check_2_data' , 'my_index 1 new_index 0' ,77 ,78],
['P2_0' , 'Check_4_data' , 'my_index 1 new_index 0' ,78 ,91],
['P1_0' , 'Check_4_data' , 'my_index 0 new_index 0' ,79 ,88],
['Type1' , 'Check_3_data' , 'intr_status 1024' ,80 ,81],
['Type_2' , '' , 'p 1 g 0 my_index 0 new_index 0 wt_done' ,82 ,83],
['Type_2' , '' , 'p 1 g 0 my_index 0 new_index 0 wt_done' ,84 ,85],
['Type_2' , '' , 'p 1 g 0 my_index 0 new_index 0 complete' ,86 ,87],
['Type_2' , '' , 'p 2 g 0 my_index 1 new_index 0 complete' ,89 ,90],
['Type1' , 'Type1_data' , '' ,9 ,10],
['Type1' , 'Check_3_data' , 'intr_status 4' ,96 ,98],
['Type1' , 'Type1_data' , '' ,99 ,110],
// ###### End of data ######
]);
data.setColumnProperty(2, 'role', 'tooltip');
data.setColumnProperty(2, 'html', true);
// ###### Bind Table ######
dashboard.bind([control, stringControl], [chart]);
// ###### Bind Table End here ######
dashboard.draw(data);
}
</script>
</head>
<style>
.center {
text-align: center;
border: 1px solid green;
}
</style>
<body style="font-family: Arial;border: 0 none;">
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard" style="width:100%; height:100%; overflow:scroll;">
<div class="center" id="control" style="margin-right: auto; border: 1px solid green;"> </div > <br>
<div class="center" id="stringControl" style="margin-right: auto; border: 1px solid green;"> </div > <br> <br>
<div id="chart" style="position: relative; width: 600px; height: 200px; bottom: 0px; padding-bottom: 200px; "></div>
<div id="table"></div>
</div>
</body>
我想解决以下问题。
- 文本在时间间隔事件中溢出，如何动态调整它意味着当文本无法放入矩形框时，只显示前缀（可以适合显示的矩形）。当我们放大数据文本时，框内会自动展开。
- 修复事件的颜色：：当我们放大框的颜色变化时，如何解决？因此滚动NumberRangeFilter（
Start） 时不会改变
演示文本如何开箱即用的示例。
示例演示在滚动Start。
示例演示当我们滚动Start NumberRangeFilter
请提供输入法怎么做？
0 个答案:
没有答案
相关问题
- 谷歌图表NumberRangeFilter SUM而不是过滤器？
- NumberRangeFilter和NumberRangeFilterBuilder
- 无法在我的Google图表中使用NumberRangeFilter
- 通过gviz_api提供google图表自定义属性，如颜色
- 如何在Python Google图表aviz_api.py中使用自定义属性
- NumberRangeFilter滑块显示一个或多个参与者从左侧搜索栏时无法绘制（）错误？
- 如何正确管理Google Charts数据属性？
- 如何配置NumberRangeFilter属性（谷歌可视化）？
- NumberRangeFilter给出“一个或多个参与者无法绘制（）错误”
- 如何更改工具提示文字的属性？
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？