AmCharts使用validateData()从dataProvider删除列不起作用 [英] AmCharts removing columns from dataProvider with validateData() not working
问题描述
我最近询问了在AmCharts中隐藏列的方法使用隐藏/显示按钮，效果很好.但是，我现在将功能分成不同的文件，以创建一个更动态的Web应用程序.
I recently asked about a way to hide columns in AmCharts using hide/show buttons, and it worked pretty well. However, I am now separating functions into different files to create a more dynamic web application.
页面 peptide.html 主要包含HTML代码，并引用 displayAmCharts.js 来显示AmChart和任何文件，在本例中为 1A80_HUMAN_R_QDAYDGK_D.js ，位于data/peptide文件夹中以从中动态加载数据.在AmChart中加载和显示数据工作正常，但是，当尝试实现隐藏/显示功能时，AmChart出现了错误.
The page peptide.html holds mostly HTML code, and refers to displayAmCharts.js for the displaying of the AmChart and to any file, in this case 1A80_HUMAN_R_QDAYDGK_D.js, in the data/peptide folder to dynamically load data from. Loading and displaying the data in the AmChart is working fine, however when trying to emplement the hide/show function I get into errors with AmChart.
每次调用函数hideValue()时，都会生成一个新的dataProvider并替换旧的数据提供者，而AmChart中的结果只是空白.在此 JS Bin示例中自行尝试，显示一些数据，选择一个列要隐藏，请单击隐藏"，您会看到图表的轮廓几乎保持不变，图例仍显示相同的选择，但实际数据正在显示.
Every time the function hideValue() is called, a new dataProvider is generated and the old gets replaced the results in the AmChart are just BLANK. Try it yourself in this JS Bin example, show some of the data, select a column to hide, click hide and you'll see that the outlining of the chart stays almost the same, the legend still shows the same selection but there is actual data being displayed.
奇怪的是，displayAmCharts()中有注释代码可以替换这些值，但是如果不对这些值进行硬编码，则替换将不起作用.一些控制确切地包含在其中的附加数据的日志没有显示任何异常，即与默认dataProvider中相同的数据结构.
The strange thing is there commentary code in displayAmCharts() works to replace the values, but when these aren't hard-coded the replacement doesn't work. Some logs to the control of what exactly additionalData contained showed nothing out of the ordinary, i.e. the same structure of data as in the default dataProvider.
是否有任何有关为何无法正确显示数据的线索?
下面的代码也可以在JS Bin上找到:
Code below can also be found on JS Bin:
<html>
<head>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
</head>
<script>
// Source would be C:/Users/Username/Documents/Visualisation Tool/data/peptide/1A80_HUMAN_R_QDAYDGK_D.js
var graphValues = [{
"balloonText": "Control: [[value]]",
"fillAlphas": 1,
"id": "Control",
"lineAlpha": 1,
"lineColor": "#008000",
"title": "Control",
"type": "column",
"newStack": true,
"valueField": "Control",
"hidden": true},
{
"balloonText": "Control SD: [[value]]",
"fillAlphas": 1,
"id": "Control SD",
"lineAlpha": 1,
"lineColor": "#000000",
"title": "Control SD",
"type": "column",
"valueField": "Control SD",
"hidden": true},
{
"balloonText": "Sample A: [[value]]",
"fillAlphas": 1,
"id": "Sample A",
"lineAlpha": 1,
"lineColor": "#008080",
"title": "Sample A",
"type": "column",
"newStack": true,
"valueField": "Sample A",
"hidden": true},
{
"balloonText": "Sample A SD: [[value]]",
"fillAlphas": 1,
"id": "Sample A SD",
"lineAlpha": 1,
"lineColor": "#000000",
"title": "Sample A SD",
"type": "column",
"valueField": "Sample A SD",
"hidden": true},
{
"title": "All",
"id": "all",
"legendValueText": "",
"legendPeriodValueText": "",
"hidden": true
}];
var dataValues = [{
"glycan": "Hex5HexNAc4NeuAc1",
"Control": 100.0,
"Control SD": 10.0,
"Sample A": 80.0,
"Sample A SD": 8.0},
{
"glycan": "Hex5HexNAc4NeuAc2",
"Control": 50.0,
"Control SD": 10.0,
"Sample A": 4.0,
"Sample A SD": 4.0}
];
</script>
<script>
// Source would be C:/Users/Username/Documents/Visualisation Tool/scripts/displayAmCharts.js
var hiddenValues = [];
var dataProviderVals;
function displayAmCharts(additionalData){
var graphsVals = graphValues;
dataProviderVals = dataValues;
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"dataProvider": dataProviderVals,
"legend": {
"useGraphSettings": true,
"borderAlpha": 1,
"align": "center",
"spacing": 125,
"listeners": [ {
"event": "hideItem",
"method": legendHandler
}, {
"event": "showItem",
"method": legendHandler
}]
},
"categoryField": "glycan",
"categoryAxis": {
"autoWrap": true
},
"rotate": false,
"graphs": graphsVals,
"valueAxes": [
{
"stackType": "regular",
"id": "ValueAxis-1",
"position": "left",
"axisAlpha": 1
}
],
"export": {
"enabled": true
}
});
/*
This manual code below works to replace the data.
var test = [{
"glycan": "Hex5HexNAc4NeuAc3",
"Control": 100.0,
"Control SD": 10.0,
"Sample A": 80.0,
"Sample A SD": 8.0},
{
"glycan": "Hex5HexNAc4NeuAc4",
"Control": 50.0,
"Control SD": 10.0,
"Sample A": 4.0,
"Sample A SD": 4.0}
];
chart.dataProvider = test;
chart.validateData();
*/
if(additionalData != undefined){
// Replace the dataProvider with additionalData from hideValue and redraw the chart.
chart.dataProvider = additionalData;
chart.validateData();
}
function legendHandler(evt) {
var state = evt.dataItem.hidden;
if (evt.dataItem.id == "all") {
for (var i1 in evt.chart.graphs) {
if (evt.chart.graphs[ i1 ].id != "all") {
evt.chart[evt.dataItem.hidden ? "hideGraph" : "showGraph" ]( evt.chart.graphs[ i1 ]);
}
}
}
}
}
function hideValue(){
var selection = document.getElementById("selection");
var selectedValue = selection.options[selection.selectedIndex].value;
hiddenValues.push(selectedValue);
var newDataProvider = [];
dataValues.forEach(function(item){
if(hiddenValues.includes(item.glycan) == false){
newDataProvider.push(item);
}
});
displayAmCharts(newDataProvider);
}
function fillSelection(){
var select = document.getElementById("selection");
var options = [];
dataProviderVals.forEach(function(item){
options.push(item.glycan);
});
for(var i = 0; i < options.length; i++) {
var opt = options[i];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
select.appendChild(el);
}
}
</script>
<body onload="displayAmCharts(); fillSelection()">
<header>
<h1><b>Visualisation Tool<b></h1>
</header>
<h2></h2>
<div id="chartdiv"><p>Unfortunately there is no data available.</p></div>
<div>
<select class="select" id="selection">
<option disabled selected>Select an option.</option>
</select>
<button class="button" type="button" onclick="hideValue()">Hide</button>
<button class="button" type="button">Show</button>
</div>
</body>
<script type="text/javascript">
// Commentary in this version as all JS scripts are included in the same page.
// Open .JS file that contains data at C > Users > User > Documents > Tool folder > Data > Peptide > peptide based on value stored in localStorage, example would be localStorage.getItem("peptideSelection") = "1A80_HUMAN_R_QDAYDGK_D".
// var peptide = localStorage.getItem("peptideSelection");
// var JSLink = "C://Users//Z678187//Documents//StackExample//data//peptide//"+peptide+".js";
// C://Users/Z678187//Documents/StackExample//data//peptide//1A80_HUMAN_R_QDAYDGK_D.js would be the file location.
// var JSElement = document.createElement('script');
// JSElement.src = JSLink;
// JSElement.onload = OnceLoaded;
// document.getElementsByTagName('head')[0].appendChild(JSElement);
// function OnceLoaded() {
// displayAmCharts();
// fillSelection();
// }
</script>
</html>
推荐答案
这可能与每次调用displayAmCharts时重新创建图表有关.它是不必要的，会使amCharts感到困惑.我将chart定义为全局变量，并且只创建一次图表.
This probably has to do with recreating the chart every time displayAmCharts is called. It is unneccessary and will get amCharts confused. I would define chart as a global variable and only create the chart once.
您的全球客户
var hiddenValues = [];
var dataProviderVals;
var chart = null; // chart as global variable
displayAmCharts函数
function displayAmCharts(additionalData){
var graphsVals = graphValues;
dataProviderVals = dataValues;
// create chart only once
if(chart == null){
chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"dataProvider": dataProviderVals,
// ...
});
}
if(additionalData != undefined){
// Replace the dataProvider with additionalData from hideValue and redraw the chart.
chart.dataProvider = additionalData;
chart.validateData();
}
// ...
}
那应该可以解决问题了:-)
That should solve the issue :-)
这篇关于AmCharts使用validateData()从dataProvider删除列不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
