个人中心
文章发布
退出
作者热门文章
- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库？
- java - OnItemClickListener 不起作用，但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
25
4
我仍在努力使其他库与 AngularJS 一起工作，因为它与其他库的逻辑不同。我需要使用 amCharts Stock 可视化数据，但互联网上没有关于这两者一起工作的信息。
我怎样才能使它与 angularjs 一起工作:http://jsfiddle.net/922JW/
var chart = AmCharts.makeChart("chartdiv", {
type: "stock",
"theme": "none",
pathToImages: "http://www.amcharts.com/lib/3/images/",
categoryAxesSettings: {
minPeriod: "mm"
},
dataSets: [{
color: "#b0de09",
fieldMappings: [{
fromField: "value",
toField: "value"
}, {
fromField: "volume",
toField: "volume"
}],
dataProvider: chartData,
categoryField: "date"
}],
panels: [{
showCategoryAxis: false,
title: "Value",
percentHeight: 70,
stockGraphs: [{
id: "g1",
valueField: "value",
type: "smoothedLine",
lineThickness: 2,
bullet: "round"
}],
stockLegend: {
valueTextRegular: " ",
markerType: "none"
}
},
{
title: "Volume",
percentHeight: 30,
stockGraphs: [{
valueField: "volume",
type: "column",
cornerRadiusTop: 2,
fillAlphas: 1
}],
stockLegend: {
valueTextRegular: " ",
markerType: "none"
}
}
],
chartScrollbarSettings: {
graph: "g1",
usePeriod: "10mm",
position: "top"
},
chartCursorSettings: {
valueBalloonsEnabled: true
},
periodSelector: {
position: "top",
dateFormat: "YYYY-MM-DD JJ:NN",
inputFieldWidth: 150,
periods: [{
period: "hh",
count: 1,
label: "1 hour",
selected: true
}, {
period: "hh",
count: 2,
label: "2 hours"
}, {
period: "hh",
count: 5,
label: "5 hour"
}, {
period: "hh",
count: 12,
label: "12 hours"
}, {
period: "MAX",
label: "MAX"
}]
},
panelsSettings: {
usePrefixes: true
}
});
谢谢。
最佳答案
我会创建一些接收图表设置并用作模板的基本指令(隔离范围):
<div id="container"></div>
此外，我们可以编写多个观察器来监听用户操作。
这是工作示例如何使用它:
(它不是基于您的设置，但您可以使用相同的流程)
演示 Fiddle
指令
myapp.directive('myElem',
function () {
return {
restrict: 'E',
replace:true,
scope: {
config: '='
},
template: '<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>',
link: function (scope, element, attrs) {
var chart = false;
var initChart = function() {
if (chart) chart.destroy();
var config = scope.config || {};
chart = new Highcharts.Chart(config);
if(config.loading) {
chart.showLoading();
}
};
initChart();
scope.$watch('config.loading', function (loading) {
if(loading) {
chart.showLoading();
} else {
chart.hideLoading();
}
});
scope.$watch('config.series[0].type', function (type) {
chart.series[0].update({type: type});
});
scope.$watch('config.series[0].dataLabels.enabled', function (enableDataLabels) {
chart.series[0].update({dataLabels: {enabled: enableDataLabels}});
});
}//end watch
}
}) ;
用法:
<my-elem config="chartConfig"> </my-elem>
[编辑]
演示 2 FIddle
HTML
<div>
<my-elem ></my-elem>
</div>
JS
var myapp = angular.module('myModule', []);
myapp.directive('myElem',
function () {
return {
restrict: 'E',
replace:true,
template: '<div id="chartdiv" style="min-width: 310px; height: 400px; margin: 0 auto"></div>',
link: function (scope, element, attrs) {
var chart = false;
var initChart = function() {
if (chart) chart.destroy();
var config = scope.config || {};
chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "none",
"marginLeft": 20,
"pathToImages": "http://www.amcharts.com/lib/3/images/",
"dataProvider": [{
"year": "1950",
"value": -0.307
}, {
"year": "1951",
"value": -0.168
}, {
"year": "1952",
"value": -0.073
}, {
"year": "1953",
"value": -0.027
}, {
"year": "1954",
"value": -0.251
}, {
"year": "1955",
"value": -0.281
}, {
"year": "1956",
"value": -0.348
}, {
"year": "1957",
"value": -0.074
}, {
"year": "1958",
"value": -0.011
}, {
"year": "1959",
"value": -0.074
}, {
"year": "1960",
"value": -0.124
}, {
"year": "1961",
"value": -0.024
}, {
"year": "1962",
"value": -0.022
}, {
"year": "1963",
"value": 0
}, {
"year": "1964",
"value": -0.296
}, {
"year": "1965",
"value": -0.217
}, {
"year": "1966",
"value": -0.147
}, {
"year": "1967",
"value": -0.15
}, {
"year": "1968",
"value": -0.16
}, {
"year": "1969",
"value": -0.011
}, {
"year": "1970",
"value": -0.068
}, {
"year": "1971",
"value": -0.19
}, {
"year": "1972",
"value": -0.056
}, {
"year": "1973",
"value": 0.077
}, {
"year": "1974",
"value": -0.213
}, {
"year": "1975",
"value": -0.17
}, {
"year": "1976",
"value": -0.254
}, {
"year": "1977",
"value": 0.019
}, {
"year": "1978",
"value": -0.063
}, {
"year": "1979",
"value": 0.05
}, {
"year": "1980",
"value": 0.077
}, {
"year": "1981",
"value": 0.12
}, {
"year": "1982",
"value": 0.011
}, {
"year": "1983",
"value": 0.177
}, {
"year": "1984",
"value": -0.021
}, {
"year": "1985",
"value": -0.037
}, {
"year": "1986",
"value": 0.03
}, {
"year": "1987",
"value": 0.179
}, {
"year": "1988",
"value": 0.18
}, {
"year": "1989",
"value": 0.104
}, {
"year": "1990",
"value": 0.255
}, {
"year": "1991",
"value": 0.21
}, {
"year": "1992",
"value": 0.065
}, {
"year": "1993",
"value": 0.11
}, {
"year": "1994",
"value": 0.172
}, {
"year": "1995",
"value": 0.269
}, {
"year": "1996",
"value": 0.141
}, {
"year": "1997",
"value": 0.353
}, {
"year": "1998",
"value": 0.548
}, {
"year": "1999",
"value": 0.298
}, {
"year": "2000",
"value": 0.267
}, {
"year": "2001",
"value": 0.411
}, {
"year": "2002",
"value": 0.462
}, {
"year": "2003",
"value": 0.47
}, {
"year": "2004",
"value": 0.445
}, {
"year": "2005",
"value": 0.47
}],
"valueAxes": [{
"axisAlpha": 0,
"inside": true,
"position": "left",
"ignoreAxisWidth": true
}],
"graphs": [{
"balloonText": "[[category]]<br><b><span style='font-size:14px;'>[[value]]</span></b>",
"bullet": "round",
"bulletSize": 6,
"lineColor": "#d1655d",
"lineThickness": 2,
"negativeLineColor": "#637bb6",
"type": "smoothedLine",
"valueField": "value"
}],
"chartScrollbar": {},
"chartCursor": {
"categoryBalloonDateFormat": "YYYY",
"cursorAlpha": 0,
"cursorPosition": "mouse"
},
"dataDateFormat": "YYYY",
"categoryField": "year",
"categoryAxis": {
"minPeriod": "YYYY",
"parseDates": true,
"minorGridAlpha": 0.1,
"minorGridEnabled": true
}
});
};
initChart();
}
}
});
关于javascript - 带有 AngularJS 的 amCharts，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23009890/
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 个不
我是一名优秀的程序员,十分优秀！