基于x轴和关闭的非y轴的时间戳的高级图表

时间:2015-12-31 11:23:22

标签: javascript html charts highcharts linegraph

我使用高清插件创建了带条形图和折线图的图表。图表即将到来,但问题是实际上我需要y轴接近而x轴是时间戳。但是在我的图表中,它是基于音量和时间戳的绘图,我也无法在鼠标悬停的工具提示下获得ohlc值,我对所有这些值都没有定义。

任何人都可以告诉我一些解决方案吗

M,y代码如下所示

JSFiddle

var ohlc = [],
      volume = [],
      dataLength = data.length,
      i = 0;

    for (i; i < dataLength; i += 1) {
      ohlc.push([
        new Date(data[i].TIMESTAMP).getTime(), // the date
        parseFloat(data[i].OPEN), // open
        parseFloat(data[i].HIGH), // high
        parseFloat(data[i].LOW), // low
        parseFloat(data[i].CLOSE) // close
      ]);

      volume.push([
        new Date(data[i].TIMESTAMP).getTime(), // the date
        parseFloat(data[i].VOLUME) // the volume
      ]);
    }

    // create the chart
    $('#container').highcharts('StockChart', {


      rangeSelector: {
        selected: 0
      },

      title: {
        text: 'AAPL Stock Price'
      },

      yAxis: {
        labels: {
          align: 'right',
          x: -3
        },
        title: {
          text: 'Volume'
        },
        height: '100%',
        offset: 0,
        lineWidth: 2
      },


      plotOptions: {
        area: {
          fillColor: {
            linearGradient: {
              x1: 2,
              y1: 0,
              x2: 0,
              y2: 2
            },
            stops: [
              [0, Highcharts.getOptions().colors[0]],
              [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
            ]
          },
          marker: {
            radius: 2
          },
          lineWidth: 1,
          states: {
            hover: {
              lineWidth: 1
            }
          },
          threshold: null
        }
      },

      series: [{
        type: 'column',
        name: 'Volume',
        data: ohlc,
        height: '35%',
        yAxis: 0,
        color: '#D8D8D8'

      }, {
        type: 'area',
        name: 'Volume',
        data: volume,
        height: '35%',
        yAxis: 0
      }],

       tooltip: {
                   formatter: function() {
                         return 'O : '+this.open+' <br/>'+ 
                                'H : '+this.high+' <br/>'+
                                'L : '+this.low+' <br/>'+
                                'C : '+this.close+' <br/>'+
                                'V : '+this.volume+' <br/>'+
                                'R : '+this.rate;
                        },
       backgroundColor: null,
       useHTML: true,
       positioner: function() {
          return {
            x: 0,
            y: 90
          };
        }
       }
    });

0 个答案:

没有答案