javascript - 当窗口位于边缘时 AmStockChart 缩放窗口

标签 javascript amcharts

Here是 AmSerialChart 的一个示例,您可以在其中使用滚动按钮在数据上滚动窗口。当您到达末尾(或开头)并继续滚动时,窗口将保持相同的宽度。

Here另一个例子是使用 AmStockChart。使用稍微不同的方法来放大窗口:stockCharts 不存在 ZoomToIndexes,因此使用“zoom”方法。

var chartData = generateChartData();
var chart = AmCharts.makeChart("chartdiv", {
    "categoryAxesSettings": {
        minPeriod: "fff",
    },
    "chartScrollbarSettings": {
        graph: "g1",
        usePeriod: "fff",
    },
    "dataSets": [
        {
            mouseWheelZoomEnabled: false,
            categoryField: "date",
            dataProvider: chartData,
            fieldMappings: [
                {
                    fromField: "gg1",
                    toField: "gg1"
                }, {
                    fromField: "gg2",
                    toField: "gg2"
                }
            ],
        }
    ],
    "mouseWheelScrollEnabled": true,
    "panels": [
        {
            stockGraphs: [
                {
                    id: "g1",
                    valueField: "gg1",
                    type: "step",
                }
            ],
        }, {
            stockGraphs: [
                {
                    valueField: "gg2",
                    type: "step",
                }
            ],
        }
    ],
    "type": "stock",
});

当您在 StockChart 中向左滚动时,窗口的尺寸将会缩小! 到目前为止,我还无法确定 SerialChart 没有缩小尺寸而 StockChart 却缩小了的原因。我确实找到了一篇关于将 mouseWheelZoomEnabled 设置为 false 的帖子,但是此选项适用于 SerialChart,而不是 StockChart。

我想可以向滚动事件添加一个监听器,并防止窗口在与左侧或右侧碰撞时缩小尺寸,但是......我认为有更好的理由。

我的问题:如何防止AmStockChart中的窗口尺寸减小?

最佳答案

您必须设置minSelectedTimepanelsSettings 中以在股票图表中实现相同的行为。请注意,这也会阻止直接拖动 slider 时滚动条缩放到较小的时间范围:

var chart = AmCharts.makeChart("chartdiv", {
  panelsSettings: {
    mouseWheelZoomEnabled: false, 
    minSelectedTime: 4.32e+9,
    mouseWheelScrollEnabled: true
  },
  // ...
});

Demo

关于javascript - 当窗口位于边缘时 AmStockChart 缩放窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47594538/

相关文章:

javascript - react native |在 React-Native 中生成一个不重复的(名称)生成器

javascript - 在图表中显示 mysql 数据库中的数据

JavaScript AmCharts

amcharts - 趋势线在 Amcharts 甘特图中不起作用

javascript - 是否有调试 jQuery 事件处理程序的工具/技术?

javascript - 如何只注册一次点击事件?

javascript - 获取 : Reject promise with JSON error object

javascript - mongodb native 驱动程序获取没有数据库名称的集合名称

javascript - 通过单击 AmChart4 使系列隐藏和显示

javascript - 通过串行 AmCharts 中的 `dataLoader` 加载数据不会呈现图表