程序员经验分享-hwhale

在 amcharts 中单击时突出显示单个条形

2023-12-28

我有 amcharts 的条形图。我需要在点击栏上突出显示单个栏。当前的情况是当我单击多个栏时，所有栏都会突出显示。

这是我的代码

      "listeners": [{
           "event": "clickGraphItem",
           "method": function(event) {
               var node = event.item.columnGraphics.node.lastChild;
               node.setAttribute("stroke","#8198b4");
               node.setAttribute("fill","#8198b4");
     }
     }]

有什么帮助吗？谢谢。


不要修改节点，而是使用fillColorsField相反，它允许您设置/取消设置当前选定列的突出显示，并允许您浏览图表的其余数据以确保仅选择一项。

  "graphs": [{
     // ...
     "fillColorsField": "selected"
  }],
  "zoomOutOnDataUpdate": false, //recommended so that the chart doesn't reset the current zoom after clicking on a column
  "listeners": [{
    "event": "clickGraphItem",
    "method": function(e) {
      //if the current item is already selected, deselect it
      if (e.item.dataContext.selected) {
        e.item.dataContext.selected = undefined;
      }
      else {
        //otherwise, find any other columns that were selected and deselect them 
        for (var i = 0; i < e.chart.dataProvider.length; ++i) {
          if (e.chart.dataProvider[i].selected) {  
            e.chart.dataProvider[i].selected = undefined;
            break;
          }
        }
        e.item.dataContext.selected = "#8198b4";
      }
      e.chart.validateData(); //update chart
    } 
  }]

演示如下：

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "dataProvider": [{
    "country": "USA",
    "visits": 2025
  }, {
    "country": "China",
    "visits": 1882
  }, {
    "country": "Japan",
    "visits": 1809
  }, {
    "country": "Germany",
    "visits": 1322
  }, {
    "country": "UK",
    "visits": 1122
  }, {
    "country": "France",
    "visits": 1114
  }, {
    "country": "India",
    "visits": 984
  }, {
    "country": "Spain",
    "visits": 711
  }, {
    "country": "Netherlands",
    "visits": 665
  }, {
    "country": "Russia",
    "visits": 580
  }, {
    "country": "South Korea",
    "visits": 443
  }, {
    "country": "Canada",
    "visits": 441
  }, {
    "country": "Brazil",
    "visits": 395
  }],
  "graphs": [{
    "fillAlphas": 0.9,
    "lineAlpha": 0.2,
    "type": "column",
    "valueField": "visits",
    "fillColorsField": "selected"
  }],
  "categoryField": "country",
  "zoomOutOnDataUpdate": false, //recommended so that the chart doesn't reset the current zoom after clicking on a column
  "listeners": [{
    "event": "clickGraphItem",
    "method": function(e) {
      //if the current item is already selected, deselect it
      if (e.item.dataContext.selected) {
        e.item.dataContext.selected = undefined;
      }
      else {
        //otherwise, find any other columns that were selected and deselect them 
        for (var i = 0; i < e.chart.dataProvider.length; ++i) {
          if (e.chart.dataProvider[i].selected) {  
            e.chart.dataProvider[i].selected = undefined;
            break;
          }
        }
        e.item.dataContext.selected = "#8198b4";
      }
      e.chart.validateData(); //update chart
    } 
  }]
});
html, body {
  width: 100%;
  height: 100%;
  margin: 0px;
}

#chartdiv {
	width: 100%;
	height: 100%;
}
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>

<div id="chartdiv"></div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

onclick

amcharts

在 amcharts 中单击时突出显示单个条形 的相关文章

  • iPad - 无法在框架内滚动

    我无法滚动 iPad Safari 中框架内调用的 pdf 我已经尝试过两件事 2 指滚动 使用对象 嵌入代替框架 但这是行不通的 事实上我已经尝试了很多东西 溢出 高度等等 请帮我 先感谢您 根据这篇文章http support appl

  • 如何设置上传的文件名？

    By using multer I made it to request image file like this 这个文件存储在我设置的 上传 文件夹中 我的代码如下 var multer require multer var uploa

  • 从 php 到 JavaScript 的数组

    我正在尝试使用 json 将数组列表从 php 传输到 javascript 但它不起作用 JS ajax url getProfilePhotos php type post post or get method data if you

  • Crypto-Js 库的 hmac-256 脚本返回函数结构而不是 Google Apps 脚本中的值，在外部工作正常吗？

    我正在设置一个谷歌电子表格项目来连接到我的 CryptoExchange API 但是当涉及到这个简单的 CryptoJs Hmac sha256 脚本时 它不起作用 它返回函数结构而不是值 而在外部它工作正常 看我的jsfiddle ht

  • Javascript 在另一个函数中检测“Shift”键按下

    我正在从 Flash 影片 使用外部接口 调用我的 html 页面中的 Javascript 函数 并且我想知道调用该函数时用户是否按下了 Shift 键 例如 如果我通过鼠标单击调用该函数 这似乎很简单 因为我可以传递事件并检查 if e

  • 在多个动态添加的表单上初始化 jQuery validate() 函数

    有人建议最好初始化一个 form validate 在页面加载而不是点击事件上运行 jquery form validate 插件仅允许在输入更改时提交 https stackoverflow com questions 10984196

  • 如何在php中使用一张图像绘制形状

    我需要使用图像的一部分来创建帧图像 例如 用户将从后端上传图像片段 现在我需要根据前端用户的要求在前端创建一个框架 用户将选择框架的高度和宽度 然后他将选择该图像片段 如下所示 我没有办法做到这一点 我尝试通过 css 和 html can

  • 限制 Dropzone 仅上传特定类型的文件

    我正在使用 Dropzone 上传文件 这是我的代码 div div

  • window.open：是否可以打开一个新窗口并修改其 DOM

    我想打开一个新窗口 var my window open iframe html blank height 600 width 600 但当我打开它时 我想修改它的DOM 我尝试过 var div my document createEle

  • 如何循环遍历对象数组并生成键值对？

    我有一个像这样的对象数组 let someObj items id 12 value true id 34 value true id 56 value false 我想将其添加到现有对象中 其中 id 是该对象的键 如下所示 let ob

  • 避免在 ES6 的函数内定位 this 的对象作用域

    例如 我正在使用 D3 js 运行一个项目 导入特定模块并调用它们的函数 Setup TypeScript ES6 导入特定的 D3 组件 角6 我有一个对象 在本例中是一个角度指令 并在 SVG 画布上绘制一些圆圈 并希望它们在拖动事件上

  • 窗口大小调整触发的 DOM 事件

    我有一个布局相当复杂的页面 最初打开页面时 某些元素的对齐存在问题 但是 可以通过更改浏览器窗口的大小来 永久 解决此问题 显然 我不希望用户必须调整浏览器窗口的大小才能使页面正确显示 所以我想知道是否有一种方法可以在页面首次加载时以编程方

  • 自定义指令链接中的 element.replaceWith 仅在第一次调用时有效

    我是 Angularjs 的新手 不太了解幕后的情况 基本上我想创建一个 E 扭结指令 基于控制器中的数据 我动态创建html 就像整个 表 一样 以替换该指令 我的 html 文件中的指令是这样的

  • 尝试使用 Firebug 查找 JavaScript 文件中的函数

    我试图找到这个函数调用 myFooBar 该函数在某些 HTML 中内联引用 但页面加载了大量 JavaScript 并且在每个文件中搜索该函数需要相当多的工作 如何使用 Firebug 找到此函数所在的 JavaScript 文件 打开脚

  • JavaScript Promise 不执行 .then()

    我在 JavaScript 中的 Promise 方面遇到了一些问题 我想做的是获得一个地址列表 然后对于每个地址 我需要调用地理编码 API 来获取 lat lng 然后我将继续将标记与热图一起绘制 这是我的代码 let promiseK

  • 是否可以将请求标头添加到 CORS 预检请求中？

    我有一个从外部服务器 不是服务器 访问 API 的网站 为网站提供服务 通过简单的XmlHttpRequest 见下文 那个API 需要将用于访问服务的 API 密钥添加为请求标头 然而 正如这些CORS https developer m

  • Outlook 加载项，无法读取未定义的属性“BeginRequestEventArgs”

    我使用 Visual Studio 开发了 Outlook 插件 我的插件有一个按钮 用于填充会议邀请正文中的详细信息并添加所需的与会者 这在 99 的情况下都有效 但是 时不时地它会给我下面的 JavaScript 错误 Uncaught

  • Javascript 中 if 语句中的假值？

    过去两周 我在学校研究 JavaScript 的事情已经有一段时间了 而且我一直在做我的作业 在 Douglas Crockford 所著的 JavaScript The Good Parts 一书中 作者在第 11 页上列出了 if 语句

  • 检测浏览器选项卡是否具有焦点

    是否有可靠的跨浏览器方法来检测选项卡是否具有焦点 场景是 我们有一个定期轮询股票价格的应用程序 如果页面没有焦点 我们可以停止轮询并为每个人节省流量噪音 特别是当人们喜欢打开具有不同投资组合的多个选项卡时 Is window onblur

  • D3 将现有 SVG 字符串（或元素）追加（插入）到 DIV

    我到处寻找这个问题的答案 并找到了一些我认为可能有用的资源 但最终没有让我找到答案 这里有一些 外部SVG http bl ocks org mbostock 1014829 嵌入SVG https stackoverflow com qu

随机推荐

热门标签