个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我的函数中有多个图表，它们依赖于前一个图表。工作正常，但当我在其中添加切换按钮并尝试切换时，就会出现问题。函数又需要数据。因此，在不重新初始化图形的情况下，我想切换图形类型，从列到行。有什么办法可以这样做吗？帮助将不胜感激
var dataset = [{
"category": "category 1",
"column-1": 8,
"column-2": 5
},
{
"category": "category 2",
"column-1": 6,
"column-2": 7
},
{
"category": "category 3",
"column-1": 2,
"column-2": 3
}
]
AmCharts.makeChart("chartdiv", {
"type": "serial",
"categoryField": "category",
"startDuration": 1,
"categoryAxis": {
"gridPosition": "start"
},
"trendLines": [],
"graphs": [{
"balloonText": "[[title]] of [[category]]:[[value]]",
"fillAlphas": 1,
"id": "AmGraph-1",
"title": "graph 1",
"type": "column",
"valueField": "column-1"
},
{
"balloonText": "[[title]] of [[category]]:[[value]]",
"fillAlphas": 1,
"id": "AmGraph-2",
"title": "graph 2",
"type": "column",
"valueField": "column-2"
}
],
"guides": [],
"valueAxes": [{
"id": "ValueAxis-1",
"title": "Axis title"
}],
"allLabels": [],
"balloon": {},
"legend": {
"enabled": true,
"useGraphSettings": true
},
"titles": [{
"id": "Title-1",
"size": 15,
"text": "Chart Title"
}],
"dataProvider": dataset
});<!DOCTYPE html>
<html>
<head>
<title>chart created with amCharts | amCharts</title>
<meta name="description" content="chart created using amCharts live editor" />
<!-- amCharts javascript sources -->
<script type="text/javascript" src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/serial.js"></script>
<!-- amCharts javascript code -->
<script type="text/javascript">
</script>
</head>
<body>
<div id="chartdiv" style="width: 100%; height: 400px; background-color: #FFFFFF;"></div>
</body>
</html>最佳答案
您可以设置图中的任何公共(public)属性并调用 validateData()重新绘制图表，而无需再次提供整个数据集/makeChart 配置。假设您将图表实例存储到变量中:
chart.graphs.forEach(function(graph) {
graph.type = /* set new type */;
});
chart.validateData();
这是一个在单击外部按钮时切换图形类型和其他视觉方面的演示:
var dataset = [{
"category": "category 1",
"column-1": 8,
"column-2": 5
},
{
"category": "category 2",
"column-1": 6,
"column-2": 7
},
{
"category": "category 3",
"column-1": 2,
"column-2": 3
}
]
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"categoryField": "category",
"startDuration": 1,
"categoryAxis": {
"gridPosition": "start"
},
"trendLines": [],
"graphs": [{
"balloonText": "[[title]] of [[category]]:[[value]]",
"fillAlphas": 1,
"id": "AmGraph-1",
"title": "graph 1",
"type": "column",
"valueField": "column-1"
},
{
"balloonText": "[[title]] of [[category]]:[[value]]",
"fillAlphas": 1,
"id": "AmGraph-2",
"title": "graph 2",
"type": "column",
"valueField": "column-2"
}
],
"guides": [],
"valueAxes": [{
"id": "ValueAxis-1",
"title": "Axis title"
}],
"allLabels": [],
"balloon": {},
"legend": {
"enabled": true,
"useGraphSettings": true
},
"titles": [{
"id": "Title-1",
"size": 15,
"text": "Chart Title"
}],
"dataProvider": dataset
});
document.getElementById('toggle-type').addEventListener('click', function() {
chart.graphs.forEach(function(graph) {
if (graph.type == "column") {
graph.type = "line";
graph.fillAlphas = 0;
graph.bullet = "round";
}
else {
graph.type = "column";
graph.fillAlphas = 1;
graph.bullet = undefined;
}
});
chart.validateData();
});<!DOCTYPE html>
<html>
<head>
<title>chart created with amCharts | amCharts</title>
<meta name="description" content="chart created using amCharts live editor" />
<!-- amCharts javascript sources -->
<script type="text/javascript" src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/serial.js"></script>
<!-- amCharts javascript code -->
<script type="text/javascript">
</script>
</head>
<body>
<button id="toggle-type">Toggle line/column</button>
<div id="chartdiv" style="width: 100%; height: 400px; background-color: #FFFFFF;"></div>
</body>
</html>关于javascript - 切换 amchart 图形类型，不带调用功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54646515/
25
4
0
amcharts 轴中可以有组吗？ 检查 highcharts 中的示例:example 最佳答案 有点......这不是官方功能，但你可以伪造它。 您可以为标签创建一个图表，其中 valueFiel
有人知道将 amcharts 中的气球对齐方式更改为图 1 中的对齐方式的属性吗？默认情况下，我的项目中呈现的图表中的气球对齐方式如图 2 所示，如果气球文本为，有时会导致截断和溢出，如图 3 所示太
一些 AmCharts demos使用AmCharts.makeChart 其他 AmCharts demos使用new AmCharts.AmSerialChart(); 这两种方法有什么区别？ 最
我正在使用带有 Angular 和 TypeScript 的 AmChart V4( map )。 目前，当我构建用于生产的应用程序时，我得到一个“pdfmake”文件，它的成本约为 2 MB。是否可
目前我正在尝试设置当您将鼠标悬停在具有动态内容(公司名称)的 map 图像上时出现的工具提示的样式。 我的目标是将背景设置为特定颜色，为字体指定颜色并应用 CSS 属性“box-shadow”。 对于
如何将下图中的默认黄色替换为红色？基本上，我需要实现红色和绿色的组合。 提前致谢!! 最佳答案 lineColor 和 fillColors 是 AmGraph 负责颜色的属性。 关于amcharts
如何删除 am 图表中的侧刻度轴。例如。在这个 fiddle 中，我想删除顶部的鳞片和左侧的鳞片。我需要操作哪些属性或方法。 演示图表。 http://jsfiddle.net/JSTQW/ 目前，我
问题: 我无法使用 amcharts 库将粗体属性传递给 Axis 类别中所需的标签。 案例: 我可以使用数据集本身为图表的每个元素传递 fillColor。这是我正在使用的数据集结构的示例: var
在 IcCube 报告中，我添加了一个 amchart，在小部件高级属性中，我将 Scrollbar.Hide Resize Grips 设置为“no”以显示滚动... 滚动可见，但拖动图标不可见..
我在我的应用程序中使用条形图(amcharts)，我需要包含该条形图的图例。所以，我为栏脚本添加了以下脚本， legend = new AmCharts.AmLegend(); legend.posi
Amchart 为我提供了令人惊叹的 HTML 图形，但是... 如何设置数轴格式？目前它显示了 65,000，我需要像 65000 这样的值。没有逗号! 谢谢! 最佳答案 我解决了问题! 进入AmC
在 AmMap 中，存在“homeButtonClicked”事件，当您单击主页按钮时会触发该事件。 我想手动触发该事件。有什么办法可以做到吗？ 最佳答案 要完全缩小 map ，请使用 zoomToS
我正在使用免费版本的 AmCharts，我有一个简单的问题 - 图表加载后如何删除？我在网上搜索过，但没有找到太多内容。 最佳答案 如果您想销毁图表对象，请调用: chart.clear(); 然后将
我有一个条形列 amchart，并且每列上都有单击事件。但是我如何将鼠标光标更改为其他图标(例如手)以使用户知道该列是可点击的 最佳答案 您可以使用showHandOnHover如果您希望鼠标指针悬停
chart.columnSpacing 属性不适用于简单柱形图。我需要最小化两列之间的空间。 如何在简单柱形图中最小化列之间的空间？ 最佳答案 你可以尝试添加... "columnWidth": [n
我正在使用 AMCHARTS 创建商业智能应用程序。该应用程序应该是多语言的。如何将 AMCHARTS 制作的图表转换为 rtl？ 最佳答案 目前 amCharts 还没有可以翻转整个图表的一键式解决
我得到了以下动态图表(见附图)。为了可重复性，我根据标准 icCube 的销售模型创建了一个非常简单的图表。 这个想法是在列轴上有两个事实以及选定年份的数据。为了区分这些事实，我想给那些随着时间的推移
在 amcharts 3 中有 categoryAxis.guides。但是我无法在 amcharts 4 中找到它。下面是我能够在 amcharts 3 中使用的指南数组 var guidesArr
我现在正在使用 amcharts flash。参见这里:http://www.myinvestmentdecision.com.au/Sample-Results 我想更改它以使用 javascrip
我正在尝试在同一页面上创建 2 个 Amchart 实例。在这里，我手动放置数据。但是我使用 dataloader 从 php 文件加载数据，使用 mysql 输出 json。为此，我将使用 2 个不
我是一名优秀的程序员,十分优秀！