javascript - 选择列并在 amcharts 中突出显示它们
问题描述
我有一个连续的 amcharts，上面有 2 个（可能更多）图表。我正在尝试选择列并突出显示它们。参考这两个问题：
该列应通过单击突出显示，同时突出显示该列中的图形项，就像突出显示条形图中的条形一样。如何通过单击以及图形项来选择整个列？
这个 jsfiddle 用于 amcharts 图。 JSFIDDLE
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"usePrefixes": true,
"legend": {
"useGraphSettings": true,
"position": "top"
},
"dataProvider": [
{
"200": "3875",
"month": "JAN",
"205": "310"
},
{
"200": "3500",
"month": "FEB",
"205": "280"
},
{
"200": "3875",
"month": "MAR",
"205": "310"
},
{
"200": "3750",
"month": "APR",
"205": "300"
},
{
"200": "3875",
"month": "MAY",
"205": "310"
},
{
"200": "3750",
"month": "JUN",
"205": "300"
},
{
"200": "3875",
"month": "JUL",
"205": "310"
},
{
"200": "250",
"month": "AUG",
"205": "20"
},
{
"200": "0",
"month": "SEP",
"205": "0"
},
{
"200": "0",
"month": "OCT",
"205": "0"
},
{
"200": "0",
"month": "NOV",
"205": "0"
},
{
"200": "0",
"month": "DEC",
"205": "0"
}
],
"valueAxes": [{
"axisAlpha": 1,
"axisColor": "#cccccc",
"gridCount": 10,
"position": "left",
"title": "Place taken",
"dashLength": 5,
"axisThickness": 2,
"tickLength": 0
}],
"startDuration": 0.5,
"graphs": [{
"balloonText": "[[value]]",
"bullet": "round",
"title": "200",
"valueField": "200",
"fillAlphas": 0
}, {
"balloonText": "[[value]]",
"bullet": "round",
"title": "205",
"valueField": "205",
"fillAlphas": 0
}],
"chartCursor": {
"pan": false,
"valueLineEnabled": false,
"valueLineBalloonEnabled": false,
"cursorAlpha": 1,
"cursorColor": "#e2e2d9",
"color": "black",
"valueLineAlpha": 1,
"valueZoomable": true,
"fullWidth": true
},
"categoryField": "month",
"categoryAxis": {
"gridPosition": "start",
"axisAlpha": 1,
"axisThickness": 2,
"axisColor": "#cccccc",
"fillAlpha": 0.01,
"fillColor": "#000000",
"gridAlpha": 0,
"position": "bottom",
"tickLength": 0
},
"export": {
"enabled": false
},
"listeners": [{
"event": "init",
"method": function(e) {
e.chart.zoomToIndexes(e.chart.dataProvider.length - 40, e.chart.dataProvider.length - 1);
/**
* Add click event on the plot area
*/
e.chart.chartDiv.addEventListener("click", function() {
// we track cursor's last known position by "changed" event
if (e.chart.lastCursorPosition !== undefined) {
// get date of the last known cursor position
var month = e.chart.dataProvider[e.chart.lastCursorPosition][e.chart.categoryField];
// create a new guide or update position of the previous one
if (e.chart.categoryAxis.guides.length === 0) {
var guide = new AmCharts.Guide();
guide.category = month;
guide.toCategory = month;
guide.lineAlpha = 1;
guide.lineColor = "#c44";
guide.expand = true;
guide.inside = true;
guide.fillAlpha = 0.2;
guide.fillColor = "#CC0000";
e.chart.categoryAxis.addGuide(guide);
} else {
e.chart.categoryAxis.guides[0].category = month;
}
e.chart.validateData();
}
})
//handle touch screens so that subsequent guides can
//be added. Requires that the user taps the next
//point twice. Needed in order to not break zoom/pan
e.chart.chartDiv.addEventListener("touchend", function() {
e.chart.tapped = false;
});
}
}, {
"event": "changed",
"method": function(e) {
/**
* Log cursor's last known position
*/
e.chart.lastCursorPosition = e.index;
}
}],
});#chartdiv {
width: 100%;
height: 500px;
}<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<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/themes/light.js"></script>
<div id="chartdiv"></div>解决方案
colorField由于您使用的是折线图而不是柱形图，因此您可以通过使用来设置/取消设置以在单击时更改项目符号颜色来组合上述解决方案。
这是使用评论中的解决方案的更新示例。请注意，我还调整了取消选择处理以说明用户是否要重新选择先前取消选择的字段。为简单起见，我colorField对两个图表都使用了相同的方法，但可以根据您的需要随意调整。
var pre_month = "";
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"usePrefixes": true,
"legend": {
"useGraphSettings": true,
"position": "top"
},
"dataProvider": [{
"200": "3875",
"month": "JAN",
"205": "310"
},
{
"200": "3500",
"month": "FEB",
"205": "280"
},
{
"200": "3875",
"month": "MAR",
"205": "310"
},
{
"200": "3750",
"month": "APR",
"205": "300"
},
{
"200": "3875",
"month": "MAY",
"205": "310"
},
{
"200": "3750",
"month": "JUN",
"205": "300"
},
{
"200": "3875",
"month": "JUL",
"205": "310"
},
{
"200": "250",
"month": "AUG",
"205": "20"
},
{
"200": "0",
"month": "SEP",
"205": "0"
},
{
"200": "0",
"month": "OCT",
"205": "0"
},
{
"200": "0",
"month": "NOV",
"205": "0"
},
{
"200": "0",
"month": "DEC",
"205": "0"
}
],
"valueAxes": [{
"axisAlpha": 1,
"axisColor": "#cccccc",
"gridCount": 10,
"position": "left",
"title": "Place taken",
"dashLength": 5,
"axisThickness": 2,
"tickLength": 0
}],
"startDuration": 0.5,
"graphs": [{
"balloonText": "[[value]]",
"colorField": "selected",
"bullet": "round",
"title": "200",
"valueField": "200",
"fillAlphas": 0
}, {
"balloonText": "[[value]]",
"colorField": "selected",
"bullet": "round",
"title": "205",
"valueField": "205",
"fillAlphas": 0
}],
"chartCursor": {
"pan": false,
"valueLineEnabled": false,
"valueLineBalloonEnabled": false,
"cursorAlpha": 1,
"cursorColor": "#e2e2d9",
"color": "black",
"valueLineAlpha": 1,
"valueZoomable": true,
"fullWidth": true
},
"categoryField": "month",
"categoryAxis": {
"gridPosition": "start",
"axisAlpha": 1,
"axisThickness": 2,
"axisColor": "#cccccc",
"fillAlpha": 0.01,
"fillColor": "#000000",
"gridAlpha": 0,
"position": "bottom",
"tickLength": 0
},
"export": {
"enabled": false
},
"listeners": [{
"event": "init",
"method": function(e) {
e.chart.zoomToIndexes(e.chart.dataProvider.length - 40, e.chart.dataProvider.length - 1);
/**
* Add click event on the plot area
*/
e.chart.chartDiv.addEventListener("click", function() {
// we track cursor's last known position by "changed" event
if (e.chart.lastCursorPosition !== undefined) {
// get date of the last known cursor position
var month = e.chart.dataProvider[e.chart.lastCursorPosition][e.chart.categoryField];
// create a new guide or update position of the previous one
if (pre_month === month) {
e.chart.categoryAxis.guides.pop();
e.chart.dataProvider[e.chart.lastCursorPosition].selected = undefined;
pre_month = undefined; //unset so that the user can re-select the current position after de-selecting.
} else {
pre_month = month;
var guide = new AmCharts.Guide();
e.chart.categoryAxis.guides.pop();
for (var i = 0; i < e.chart.dataProvider.length; ++i) {
if (e.chart.dataProvider[i].selected) {
e.chart.dataProvider[i].selected = undefined; //clear out previously selected line
break;
}
}
guide.category = month;
guide.toCategory = month;
guide.lineAlpha = 1;
guide.lineColor = "#b6f9ee";
guide.expand = true;
guide.inside = true;
guide.fillAlpha = 0.2;
guide.lineThickness = 0;
guide.fillColor = "#b6f9ee";
e.chart.categoryAxis.addGuide(guide);
e.chart.dataProvider[e.chart.lastCursorPosition].selected = "#880000";
}
e.chart.validateData();
}
})
//handle touch screens so that subsequent guides can
//be added. Requires that the user taps the next
//point twice. Needed in order to not break zoom/pan
e.chart.chartDiv.addEventListener("touchend", function() {
e.chart.tapped = false;
});
}
}, {
"event": "changed",
"method": function(e) {
/**
* Log cursor's last known position
*/
e.chart.lastCursorPosition = e.index;
}
}],
});#chartdiv {
width: 100%;
height: 500px;
}<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<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/themes/light.js"></script>
<div id="chartdiv"></div>推荐阅读
- go - 安装 Beetools 后找不到 Bee 命令
- oracle - 通过表中的任何列查找值
- for-loop - 如何使用 for 循环生成 html.Table？
- reactjs - PWA 在加载应用程序之前打开黑白屏幕近 30 秒
- sql - 迁移 Postgresql 时禁用对外键的所有检查
- pandas - Pandas groupby each value from a column
- node.js - Nodejs远程调试和反向代理
- css - 使用反应组件（地图）作为背景图片？
- spring - 每次应用程序重新运行时，CouchBase 都会尝试创建索引
- google-chrome - Webdriver.io：acceptInsecureCerts 和 acceptSslCerts 功能选项似乎没有效果