AmCharts.js - 将默认的“compareto”设置为all而不是none
默认情况下是否可以将比较设置为全部？当我刷新页面时它只显示一行，我希望图表默认显示所有行，用户可以隐藏它们。
这是默认行为：
我想以某种方式实现这一目标：
但我无法弄清楚在图表的设置中要改变什么。 （事实上我不需要“比较”的态度，只需要隐藏多条线的所有价格图表。
这是图表（{{ google_chart|safe }}是JSON的变量 - {"web_name": [[[year,month...], price], [[year,month..], price],...}）：
<script>
var lines = [];
var dataSets = [];
generateChartData();
function generateChartData() {
var google_chart_json = {{ google_chart|safe }};
var loopcounter = -1;
$.each(google_chart_json, function (key, val) {
var line = [];
loopcounter = loopcounter + 1;
$.each(val, function (_, scan) {
var year = scan[0][0];
var month = scan[0][1];
var day = scan[0][2];
var hour = scan[0][3];
var minute = scan[0][4];
var price = scan[1];
var data = {
'date': new Date(year, month - 1, day, hour, minute),
'value': price
};
line.push(data);
});
line.sort(function (lhs, rhs) {
return lhs.date.getTime() - rhs.date.getTime();
});
lines.push([key, line]);
});
console.log('LINES');
console.log(lines);
$.each(lines, function (_, name_line) {
var dict = {
'title': name_line[0],
"fieldMappings": [{
"fromField": "value",
"toField": "value"
}],
"dataProvider": name_line[1],
"categoryField": "date"
};
dataSets.push(dict);
});
}
console.log(dataSets)
var chart = AmCharts.makeChart("chartdiv", {
categoryAxesSettings: {
minPeriod: "hh",//(at least that is not grouped)
groupToPeriods: ["DD", "WW", "MM"]//(Data will be grouped by day,week and month)
},
"type": "stock",
"theme": "light",
"dataSets": dataSets,
"panels": [{
"showCategoryAxis": false,
"title": "Value",
"percentHeight": 70,
"stockGraphs": [{
"id": "g1",
"valueField": "value",
"comparable": true,
"compareField": "value",
"balloonText": "[[date]][[title]]:<b>[[value]]</b>",
"compareGraphBalloonText": "[[title]]:<b>[[value]]</b>"
}],
"stockLegend": {
"periodValueTextComparing": "[[percents.value.close]]%",
"periodValueTextRegular": "[[value.close]]"
}
}],
"chartScrollbarSettings": {
"graph": "g1"
},
"chartCursorSettings": {
"valueBalloonsEnabled": true,
"fullWidth": true,
"cursorAlpha": 0.1,
"valueLineBalloonEnabled": true,
"valueLineEnabled": true,
"valueLineAlpha": 0.5
},
"periodSelector": {
"position": "left",
"periods": [{
"period": "MM",
"selected": true,
"count": 1,
"label": "1 month"
}, {
"period": "YYYY",
"count": 1,
"label": "1 year"
}, {
"period": "YTD",
"label": "YTD"
}, {
"period": "MAX",
"label": "MAX"
}]
},
"dataSetSelector": {
"position": "left"
},
"export": {
"enabled": true
}
});
chart.panelsSettings.recalculateToPercents = "never";
</script>
1 个答案:
答案 0 :(得分：1)
在默认情况下要比较/可见的每个数据集中将compared设置为true。第一个数据集不需要设置此设置，因此您需要在设置属性之前检查索引值，否则它将出现两次：
$.each(lines, function (idx, name_line) {
var dict = {
'title': name_line[0],
"fieldMappings": [{
"fromField": "value",
"toField": "value"
}],
"dataProvider": name_line[1],
"categoryField": "date"
};
if (idx > 0) {
dict.compared = true;
}
dataSets.push(dict);
});
使用上一个问题的数据进行演示。
＆＃13;
＆＃13;
＆＃13;
＆＃13;
var lines = [];
var dataSets = [];
generateChartData();
function generateChartData() {
var google_chart_json = {"fotolab.sk": [[[2016, 12, 19, 20, 38], 338.36], [[2016, 12, 18, 20, 38], 341.82], [[2016, 12, 17, 20, 38], 382.92], [[2016, 12, 16, 20, 38], 384.24], [[2016, 12, 15, 20, 38], 393.16], [[2016, 12, 14, 20, 38], 319.6], [[2016, 12, 13, 20, 38], 329.64], [[2016, 12, 12, 20, 38], 300.1], [[2016, 12, 11, 20, 38], 324.66], [[2016, 12, 10, 20, 38], 377.9], [[2016, 12, 20, 18, 52], 359.0]], "hej.sk": [[[2016, 12, 19, 20, 38], 380.18], [[2016, 12, 18, 20, 38], 327.4], [[2016, 12, 17, 20, 38], 382.5], [[2016, 12, 16, 20, 38], 389.76], [[2016, 12, 15, 20, 38], 385.23], [[2016, 12, 14, 20, 38], 355.48], [[2016, 12, 13, 20, 38], 328.39], [[2016, 12, 12, 20, 38], 311.35], [[2016, 12, 11, 20, 38], 350.8], [[2016, 12, 10, 20, 38], 389.81], [[2016, 12, 20, 18, 52], 399.0]], "mall.sk": [[[2016, 12, 19, 20, 38], 341.9], [[2016, 12, 18, 20, 38], 319.2], [[2016, 12, 17, 20, 38], 360.81], [[2016, 12, 16, 20, 38], 315.76], [[2016, 12, 15, 20, 38], 347.37], [[2016, 12, 14, 20, 38], 353.97], [[2016, 12, 13, 20, 38], 300.64], [[2016, 12, 12, 20, 38], 302.87], [[2016, 12, 11, 20, 38], 308.8], [[2016, 12, 10, 20, 38], 351.25], [[2016, 12, 20, 18, 52], 399.0]], "shoppie.sk": [[[2016, 12, 19, 20, 38], 363.41], [[2016, 12, 18, 20, 38], 315.55], [[2016, 12, 17, 20, 38], 369.09], [[2016, 12, 16, 20, 38], 369.85], [[2016, 12, 15, 20, 38], 354.29], [[2016, 12, 14, 20, 38], 305.96], [[2016, 12, 13, 20, 38], 387.4], [[2016, 12, 12, 20, 38], 303.95], [[2016, 12, 11, 20, 38], 384.83], [[2016, 12, 10, 20, 38], 303.81], [[2016, 12, 20, 18, 52], 399.0]], "k24.sk": [[[2016, 12, 19, 20, 38], 329.87], [[2016, 12, 18, 20, 38], 349.04], [[2016, 12, 17, 20, 38], 317.51], [[2016, 12, 16, 20, 38], 386.28], [[2016, 12, 15, 20, 38], 371.44], [[2016, 12, 14, 20, 38], 321.24], [[2016, 12, 13, 20, 38], 391.55], [[2016, 12, 12, 20, 38], 372.62], [[2016, 12, 11, 20, 38], 383.1], [[2016, 12, 10, 20, 38], 337.88], [[2016, 12, 20, 18, 52], 310.58]], "ello24.com": [[[2016, 12, 19, 20, 38], 327.53], [[2016, 12, 18, 20, 38], 395.58], [[2016, 12, 17, 20, 38], 366.37], [[2016, 12, 16, 20, 38], 328.88], [[2016, 12, 15, 20, 38], 330.78], [[2016, 12, 14, 20, 38], 349.29], [[2016, 12, 13, 20, 38], 327.62], [[2016, 12, 12, 20, 38], 396.08], [[2016, 12, 11, 20, 38], 336.72], [[2016, 12, 10, 20, 38], 345.49], [[2016, 12, 20, 18, 52], 304.0]]};
var loopcounter = -1;
$.each(google_chart_json, function (key, val) {
var line = [];
loopcounter = loopcounter + 1;
$.each(val, function (_, scan) {
var year = scan[0][0];
var month = scan[0][1];
var day = scan[0][2];
var hour = scan[0][3];
var minute = scan[0][4];
var price = scan[1];
var data = {
'date': new Date(year, month - 1, day, hour, minute),
'value': price
};
line.push(data);
});
line.sort(function (lhs, rhs) {
return lhs.date.getTime() - rhs.date.getTime();
});
lines.push([key, line]);
});
console.log('LINES');
console.log(lines);
$.each(lines, function (idx, name_line) {
var dict = {
'title': name_line[0],
"fieldMappings": [{
"fromField": "value",
"toField": "value"
}],
"dataProvider": name_line[1],
"categoryField": "date"
};
if (idx > 0) {
dict.compared = true;
}
dataSets.push(dict);
});
}
console.log(dataSets)
var chart = AmCharts.makeChart("chartdiv", {
categoryAxesSettings: {
minPeriod: "hh",//(at least that is not grouped)
groupToPeriods: ["DD", "WW", "MM"]//(Data will be grouped by day,week and month)
},
"type": "stock",
"theme": "light",
"dataSets": dataSets,
"panels": [{
"showCategoryAxis": false,
"title": "Value",
"percentHeight": 70,
"stockGraphs": [{
"id": "g1",
"valueField": "value",
"comparable": true,
"compareField": "value",
"balloonText": "[[date]][[title]]:<b>[[value]]</b>",
"compareGraphBalloonText": "[[title]]:<b>[[value]]</b>"
}],
"stockLegend": {
"periodValueTextComparing": "[[percents.value.close]]%",
"periodValueTextRegular": "[[value.close]]"
}
}],
"chartScrollbarSettings": {
"graph": "g1"
},
"chartCursorSettings": {
"valueBalloonsEnabled": true,
"fullWidth": true,
"cursorAlpha": 0.1,
"valueLineBalloonEnabled": true,
"valueLineEnabled": true,
"valueLineAlpha": 0.5
},
"periodSelector": {
"position": "left",
"periods": [{
"period": "MM",
"selected": true,
"count": 1,
"label": "1 month"
}, {
"period": "YYYY",
"count": 1,
"label": "1 year"
}, {
"period": "YTD",
"label": "YTD"
}, {
"period": "MAX",
"label": "MAX"
}]
},
"dataSetSelector": {
"position": "left"
},
"export": {
"enabled": true
}
});
chart.panelsSettings.recalculateToPercents = "never";#chartdiv {
width: 100%;
height: 400px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/amstock.js"></script>
<div id="chartdiv"></div>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？