Question

我有一个要求，我必须在x轴上显示自定义点而不是日期值。同样的自定义数据点也需要在导航器上显示。在下面的Js小提琴中，我将数据（Per13 / 2016等）转换为等效的日期值，然后使用转换的日期值绑定图表。以下是JS小提琴的链接： - Fiddle link

在Js小提琴中，我在x轴上显示Per1，Per2等，同样也必须在导航器上显示。现在我遇到了导航器的问题，当我使用滑块更改范围时，x轴标签会发生变化，但不会根据所选范围而变化。此外，工具提示格式也会发生变化。

您能告诉我如何处理这种情况以及如何处理这种情况。

        //few code lines to post fiddle link   
          xAxis: {
                    labels: {
                        formatter: function () {
                            if(fiscal13){
                            var perDate = new Date(this.value);
                            return 'Per' + (perDate.getMonth() + 1);
                            }

              }
                    }
                }

Answer 1

我不确定我是否正确，但我认为你过度了。

让我们保留原始数据，因此请删除constructor(ref:ElementRef) { ref.nativeElement.getAttribute('mydata'); } <my-app mydata="Some sample data"> loading... </my-app>功能。在创建数据时，只需将点的索引用作x值：

fiscal13Data.Data.forEach(function(item) { .. });

现在你可以进入＆＃34; Per13 / 2016＆＃34;在xAxis标签中以简单的方式使用字符串＆＃39;格式化器：

var cost = [],
  usage = [],
  dataLength = fiscal13Data.Data.length
i = 0;
for (i; i < dataLength; i += 1) {
  // need to sum costs
  cost.push([
    i, // the index
    fiscal13Data.Data[i]['Cost'] // cost
  ]);
  usage.push([
    i, // the index
    fiscal13Data.Data[i]['Usage'] // Usage
  ]);
}

在工具提示格式化程序中，它几乎完全相同：

var str = fiscal13Data.Data[this.value].Date;

这是工作演示：http://jsfiddle.net/qneuh4Ld/3/

注意：您的数据看起来有点奇怪 - 您不想先排序吗？此外，您每个日期都有两次（例如＆＃34; Per13 / 2016＆＃34; - 一次用于＆＃34;水＆＃34;一次用于＆＃34;电＆＃34;）。

在X轴上具有自定义点的股票高图表

1 个答案: