在Highcharts中设置自定义变量

时间:2016-09-12 08:25:05

标签: javascript highcharts

有没有办法创建一个在创建highcharts对象时获得值的变量,以后可以访问该变量。

例如,当使用允许您向下钻取/钻取级别的图表时,我无法知道如何跟踪您所处的级别。因此,我创建一个从0级开始的标志,并在图表触发钻取/钻取事件时更新,例如:

import java.io.*;
public class test {

/**
 * Creates a new instance of <code>test</code>.
 */
public test() {
}

/**
 * @param args the command line arguments
 */
public static void main(String[] args) {
    String line;
    try {
        Process p = Runtime.getRuntime().exec("tasklist.exe");
        BufferedReader input = new BufferedReader(new InputStreamReader(p.getInputStream()));
        while ((line = input.readLine()) != null)
        {
           System.out.println(line); 
        }
        input.close();
    } catch (IOException ioe) {
        ioe.printStackTrace();
    }
}
}

当你只有一张图表时,上面的效果非常好。每当我需要知道图表所在的var drilldown_level = 0; var template = { chart: { type: 'column', events: { drillup: function() { drilldown_level -= 1; }, drilldown: function() { drilldown_level += 1; } } }, // other options and data go here } var chart = new Highcharts.Chart(template); 级别时,我只需检查drilldown变量。但是,当我有多个图表时问题就出现了。我需要一种方法来为每个图表实例设置一个drilldown_level变量,这样我就可以参考每个特定图表的drilldown_level

有没有办法为每个图表创建一个可以这种方式引用的标志或变量?

2 个答案:

答案 0 :(得分:2)

您可以将drilldownLevel变量直接添加到图表中:

chart: {
  type: 'column',
  events: {
    load: function() {
      this.drilldownLevel = 0;
    },
    drilldown: function() {
      this.drilldownLevel += 1;
    },
    drillup: function() {
      this.drilldownLevel -= 1;
    }
  }
},

这将使您有机会对多个图表使用检查明细级别。

在这里,您可以看到它如何工作的简单示例: http://jsfiddle.net/qwuxwzx5/

在这里,您可以找到两个图表的示例:http://jsfiddle.net/qwuxwzx5/1/

答案 1 :(得分:1)

这是我设置自定义变量formatDate并在xAxis formatter中使用它的方法。

我分享关注的人。

let formatDate = this.chart.userOptions.formatDate;

chartOption = {
    chart: {
      spacingBottom: 0,
      spacingTop: 10,
      spacingLeft: 0,
      spacingRight: 0
    },
    title: {
      text: '단위(억원)',
      align: 'left',
      style: {
        color: ConstantsConfigChart.colorText,
        fontSize: ConstantsConfigChart.fontsize14
      },
      x: 0
    },
    subtitle: {
      text: ' '
    },
    yAxis: {
      title: {
        text: ' '
      },
      labels: {
        formatter: function () {
          return Highcharts.numberFormat(this.value / 100000000, 2);
        }
      },
      tickAmount: 5
    },
    xAxis: {
      type: 'datetime',
      dateTimeLabelFormats: {
        day: '%Y-%m-%d'
      },
      labels: {     
        formatter: function () {

          let formatDate = this.chart.userOptions.formatDate;

          let currentPoint = this.chart.series[0].userOptions.data.find(c => c.x == this.value);
          if (formatDate == DateFormat.WEEK) return currentPoint.display;
          if (formatDate == DateFormat.DAY) return Highcharts.dateFormat('%m월 %d일', this.value);
          if (formatDate == DateFormat.MONTH) return Highcharts.dateFormat('%m월', this.value);
        },
        rotation: 45
      },
      offset: 10,
    },
    colors: this.colorService.pickColors(),
    series: [],
    exporting: {
      enabled: false
    },
    credits: {
      enabled: false
    },
    formatDate: DateFormat.WEEK
  };

var dashboard1 = Highcharts.chart('dashboard1', chartOption);