javascript - Amcharts 指南-6ren

javascript - Amcharts 指南

转载作者：行者123 更新时间：2023-12-03 06:01:58

当我将 guides 添加到 valueAxesSettings 中时，即使我选择 valueAxesSettings 到 valueAxes 中，它也不起作用。此外，valueAxesSettings 和 valueAxes 之间有什么区别，正如引用文献所说如果在图表初始化后更改属性，则应该调用 stockChart.validateNow()方法才能使其工作。？这是什么意思？

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>My first stock chart</title>
<link rel="stylesheet" href="amcharts/style.css" type="text/css">

<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/themes/light.js"></script>
<script src="//www.amcharts.com/lib/3/amstock.js"></script>

<style>
    #chartdiv {
        width: 100%;
        height: 500px;
        font-size: 11px;
    }
</style>

<script type="text/javascript">
        AmCharts.makeChart( "chartdiv", {
            "type": "stock",
            "dataDateFormat": "YYYY-MM-DD",
            "dataSets": [ {
                "dataProvider": [ {
                    "date": "2011-06-01",
                    "val": 10
                }, {
                    "date": "2011-06-02",
                    "val": 11
                }, {
                    "date": "2011-06-03",
                    "val": 12
                }, {
                    "date": "2011-06-04",
                    "val": 11
                }, {
                    "date": "2011-06-05",
                    "val": 10
                }, {
                    "date": "2011-06-06",
                    "val": 11
                }, {
                    "date": "2011-06-07",
                    "val": 13
                }, {
                    "date": "2011-06-08",
                    "val": 14
                }, {
                    "date": "2011-06-09",
                    "val": 17
                }, {
                    "date": "2011-06-10",
                    "val": 13
                } ],
                "fieldMappings": [ {
                    "fromField": "val",
                    "toField": "value"
                } ],
                "categoryField": "date"
            } ],

            "panels": [ {

                "legend": {},

                "stockGraphs": [ {
                    "id": "graph1",
                    "valueField": "value",
                    "type": "line",
                    "title": "MyGraph",
                    "fillAlphas": 0
                } ]
            } ],

            "panelsSettings": {
                "startDuration": 1
            },

            "categoryAxesSettings": {
                "dashLength": 5
            },

            "valueAxesSettings": {
                "dashLength": 13,
                "guides": {
                    "value": 10,
                    "tovalue": 12,
                    "lineColor": "#CC0000",
                    "lineAlpha": 1,
                    "fillAlpha": 0.2,
                    "fillColor": "#CC0000",
                    "dashLength": 2,
                    "inside": true,
                }
            },

            "chartScrollbarSettings": {
                "graph": "graph1",
                "graphType": "line",
                "position": "bottom"
            },

            "chartCursorSettings": {
                "valueBalloonsEnabled": true
            },

            "periodSelector": {
                "periods": [ {
                    "period": "DD",
                    "count": 1,
                    "label": "1 day"
                }, {
                    "period": "DD",
                    "selected": true,
                    "count": 5,
                    "label": "5 days"
                }, {
                    "period": "MM",
                    "count": 1,
                    "label": "1 month"
                }, {
                    "period": "YYYY",
                    "count": 1,
                    "label": "1 year"
                }, {
                    "period": "YTD",
                    "label": "YTD"
                }, {
                    "period": "MAX",
                    "label": "MAX"
                } ]
            }
        } );
</script>
</head>
<body>
<div id="chartdiv"></div>
</body>
</html>

最佳答案

valueAxesSettings 是 valueAxes 的全局版本 - 您在 valueAxesSettings 中设置的任何内容都将应用于所有库存面板的 valueAxes 对象。如果您想覆盖或设置面板 valueAxes 中的特定设置，您可以在面板内设置 valueAxes:

"panels": [{
  "valueAxes":[{
    //settings specific to this panel
  }],
  // ...
}, {
  "valueAxes": [{
    //settings specific to this panel
  }]
}

guides 属性是一个数组。您将其设置为单个对象，这是不正确的。另外，该属性称为 toValue，而不是“tovalue” - 大小写很重要。这是更正后的 valueAxesSettings 对象:

  "valueAxesSettings": {
    "dashLength": 13,
    "guides": [{
      "value": 10,
      "toValue": 12,
      "lineColor": "#CC0000",
      "lineAlpha": 1,
      "fillAlpha": 0.2,
      "fillColor": "#CC0000",
      "dashLength": 2,
      "inside": true
    }]
  },

演示:

AmCharts.makeChart("chartdiv", {
  "type": "stock",
  "dataDateFormat": "YYYY-MM-DD",
  "dataSets": [{
    "dataProvider": [{
      "date": "2011-06-01",
      "val": 10
    }, {
      "date": "2011-06-02",
      "val": 11
    }, {
      "date": "2011-06-03",
      "val": 12
    }, {
      "date": "2011-06-04",
      "val": 11
    }, {
      "date": "2011-06-05",
      "val": 10
    }, {
      "date": "2011-06-06",
      "val": 11
    }, {
      "date": "2011-06-07",
      "val": 13
    }, {
      "date": "2011-06-08",
      "val": 14
    }, {
      "date": "2011-06-09",
      "val": 17
    }, {
      "date": "2011-06-10",
      "val": 13
    }],
    "fieldMappings": [{
      "fromField": "val",
      "toField": "value"
    }],
    "categoryField": "date"
  }],

  "panels": [{

    "valueAxes": [{

    }],

    "legend": {},

    "stockGraphs": [{
      "id": "graph1",
      "valueField": "value",
      "type": "line",
      "title": "MyGraph",
      "fillAlphas": 0
    }]
  }],

  "panelsSettings": {
    "startDuration": 1
  },

  "categoryAxesSettings": {
    "dashLength": 5
  },

  "valueAxesSettings": {
    "dashLength": 13,
    "guides": [{
      "value": 10,
      "toValue": 12,
      "lineColor": "#CC0000",
      "lineAlpha": 1,
      "fillAlpha": 0.2,
      "fillColor": "#CC0000",
      "dashLength": 2,
      "inside": true
    }]
  },

  "chartScrollbarSettings": {
    "graph": "graph1",
    "graphType": "line",
    "position": "bottom"
  },

  "chartCursorSettings": {
    "valueBalloonsEnabled": true
  },

  "periodSelector": {
    "periods": [{
      "period": "DD",
      "count": 1,
      "label": "1 day"
    }, {
      "period": "DD",
      "selected": true,
      "count": 5,
      "label": "5 days"
    }, {
      "period": "MM",
      "count": 1,
      "label": "1 month"
    }, {
      "period": "YYYY",
      "count": 1,
      "label": "1 year"
    }, {
      "period": "YTD",
      "label": "YTD"
    }, {
      "period": "MAX",
      "label": "MAX"
    }]
  }
});

#chartdiv {
  width: 100%;
  height: 500px;
  font-size: 11px;
}

<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/themes/light.js"></script>
<script src="//www.amcharts.com/lib/3/amstock.js"></script>

<div id="chartdiv"></div>

关于validateNow，如果您更改股票图表对象中的属性，则需要调用 validateNow 以使用新设置重新绘制图表。 validateData 主要在更改 dataSets/dataProvider 时使用。

关于javascript - Amcharts 指南，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39719203/

文章推荐： javascript - JQuery 隐藏\显示是否选中复选框

文章推荐： Javascript 对象/函数在另一个对象/函数中的可访问性

文章推荐： javascript - 使用 jquery 全选和取消选择复选框

amcharts - Amcharts 中轴的组类别
amcharts 轴中可以有组吗？检查 highcharts 中的示例:example 最佳答案有点......这不是官方功能，但你可以伪造它。您可以为标签创建一个图表，其中 valueFiel
amcharts - Amcharts 中的属性可以设置气球对齐吗？
有人知道将 amcharts 中的气球对齐方式更改为图 1 中的对齐方式的属性吗？默认情况下，我的项目中呈现的图表中的气球对齐方式如图 2 所示，如果气球文本为，有时会导致截断和溢出，如图 3 所示太
amcharts - AmCharts.makeChart 和 new AmCharts.AmSerialChart(); 有什么区别
一些 AmCharts demos使用AmCharts.makeChart 其他 AmCharts demos使用new AmCharts.AmSerialChart(); 这两种方法有什么区别？最
amcharts - 减少 AmChart 构建大小
我正在使用带有 Angular 和 TypeScript 的 AmChart V4( map )。目前，当我构建用于生产的应用程序时，我得到一个“pdfmake”文件，它的成本约为 2 MB。是否可
amcharts - AmCharts (V4) 中的样式工具提示
目前我正在尝试设置当您将鼠标悬停在具有动态内容(公司名称)的 map 图像上时出现的工具提示的样式。我的目标是将背景设置为特定颜色，为字体指定颜色并应用 CSS 属性“box-shadow”。对于
amcharts - 如何在 amCharts 柱形图中设置自定义颜色？
如何将下图中的默认黄色替换为红色？基本上，我需要实现红色和绿色的组合。提前致谢!! 最佳答案 lineColor 和 fillColors 是 AmGraph 负责颜色的属性。关于amcharts
amcharts - 如何删除 amcharts 中的左侧刻度
如何删除 am 图表中的侧刻度轴。例如。在这个 fiddle 中，我想删除顶部的鳞片和左侧的鳞片。我需要操作哪些属性或方法。演示图表。 http://jsfiddle.net/JSTQW/ 目前，我
amcharts - 如何使用 amcharts 库有条件地为选定的类别标签定义粗体？
问题: 我无法使用 amcharts 库将粗体属性传递给 Axis 类别中所需的标签。案例: 我可以使用数据集本身为图表的每个元素传递 fillColor。这是我正在使用的数据集结构的示例: var
amcharts - IcCube - AmChart 滚动条拖动图标不显示
在 IcCube 报告中，我添加了一个 amchart，在小部件高级属性中，我将 Scrollbar.Hide Resize Grips 设置为“no”以显示滚动... 滚动可见，但拖动图标不可见..
amcharts - 如何在条形图 amcharts 中添加图例？
我在我的应用程序中使用条形图(amcharts)，我需要包含该条形图的图例。所以，我为栏脚本添加了以下脚本， legend = new AmCharts.AmLegend(); legend.posi
amcharts - Amcharts Javascript 的数字格式
Amchart 为我提供了令人惊叹的 HTML 图形，但是... 如何设置数轴格式？目前它显示了 65,000，我需要像 65000 这样的值。没有逗号! 谢谢! 最佳答案我解决了问题! 进入AmC
amcharts - AmChart map 中如何手动触发事件？
在 AmMap 中，存在“homeButtonClicked”事件，当您单击主页按钮时会触发该事件。我想手动触发该事件。有什么办法可以做到吗？最佳答案要完全缩小 map ，请使用 zoomToS
amcharts - 如何删除 amCharts 图表
我正在使用免费版本的 AmCharts，我有一个简单的问题 - 图表加载后如何删除？我在网上搜索过，但没有找到太多内容。最佳答案如果您想销毁图表对象，请调用: chart.clear(); 然后将
amcharts - 如何在 Amchart 中更改鼠标光标
我有一个条形列 amchart，并且每列上都有单击事件。但是我如何将鼠标光标更改为其他图标(例如手)以使用户知道该列是可点击的最佳答案您可以使用showHandOnHover如果您希望鼠标指针悬停
amcharts - 如何最小化 amCharts 柱形图中列之间的空间？
chart.columnSpacing 属性不适用于简单柱形图。我需要最小化两列之间的空间。如何在简单柱形图中最小化列之间的空间？最佳答案你可以尝试添加... "columnWidth": [n
amcharts - 将 amCHARTS 转换为 RTL
我正在使用 AMCHARTS 创建商业智能应用程序。该应用程序应该是多语言的。如何将 AMCHARTS 制作的图表转换为 rtl？最佳答案目前 amCharts 还没有可以翻转整个图表的一键式解决
amcharts - icCube - 在 amCharts 组合图表的列中设置 2 个维度的系列颜色
我得到了以下动态图表(见附图)。为了可重复性，我根据标准 icCube 的销售模型创建了一个非常简单的图表。这个想法是在列轴上有两个事实以及选定年份的数据。为了区分这些事实，我想给那些随着时间的推移
javascript - amcharts 4 中等效的 amcharts 3 指南是什么
在 amcharts 3 中有 categoryAxis.guides。但是我无法在 amcharts 4 中找到它。下面是我能够在 amcharts 3 中使用的指南数组 var guidesArr
javascript - 将我的 amcharts flash 升级到 amcharts javascript
我现在正在使用 amcharts flash。参见这里:http://www.myinvestmentdecision.com.au/Sample-Results 我想更改它以使用 javascrip
javascript - Amcharts - 在同一页面上的 Amchart 3 中创建 2 个图表实例
我正在尝试在同一页面上创建 2 个 Amchart 实例。在这里，我手动放置数据。但是我使用 dataloader 从 php 文件加载数据，使用 mysql 输出 json。为此，我将使用 2 个不

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - Amcharts 指南