HIghcharts onclick根据某个值更改xAxis plotline

时间:2016-06-13 08:09:04

标签: javascript jquery highcharts

我必须根据某些特定时间移动我的xAxis情节线,这可以使用Onclick事件在图形外部描述。我的代码在这里

HTML代码

<li class="selected" onclick="exp_chng(this.id)" id="time1"><?php 
           date_default_timezone_set("Asia/Kolkata");
          echo date('H:i'); ?></li>
          <li onclick="exp_chng(this.id)" id="time2"><?php  $currentDate = strtotime(date('H:i'));   $futureDate = $currentDate+(60*1); echo $formatDate = date("H:i", $futureDate); ?> </li>

          <li onclick="exp_chng(this.id)" id="time3"><?php  $currentDate = strtotime(date('H:i'));   $futureDate = $currentDate+(60*2); echo $formatDate = date("H:i", $futureDate); ?></li>

          <li onclick="exp_chng(this.id)" id="time4"><?php  $currentDate = strtotime(date('H:i'));   $futureDate = $currentDate+(60*3); echo $formatDate = date("H:i", $futureDate); ?></li>

Highcharts初始化

xAxis:{                 键入:&#39; datetime&#39;,

             type: 'datetime',
            minTickInterval: 1000 * 60, //one minute

            gridLineWidth: 0.1,
            plotLines: [{
            value: exp_time, // Value of where the line will appear
            width: 2 ,
            color: '#A28F29',
            // dashStyle: 'dash',
            id: 'plotline1',
            label: {
                      text: 'Expiration time',
                      style: {
                        color: '#686A3B',
                        //#A28F29
                        fontWeight: 'bold'
                      }
                    }
        }]
        },

Javascript代码

function exp_chng(id)
{
  var time = $('#'+id).html();


  var chart = $("#tv_chart_container").highcharts();
  chart.xAxis[0].removePlotLine('plotline1');


  var check_1 =chart.xAxis[0].addPlotLine({
              value: time,
              color: '#A28F29',
              width: 2,
              id: 'plotline1', 
              label: {
                text: 'Expiration time',
                style: {
                  color: '#686A3B',

                  fontWeight: 'bold'
                }
              }
          });
  console.log(check_1);
}

0 个答案:

没有答案