创建具有相同数据的四个图表不同的渲染(HIGHCHARTS)

时间:2016-06-28 11:00:59

标签: javascript highcharts

我需要帮助,我需要使用SAME数据创建四个图表但具有不同的渲染,我该怎么办呢?

这里是我的高级代码,

    var chart;
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'tv_chart_container', 
                type: 'area',
                backgroundColor: '#1E2229',
                //#1E2A38
                marginRight: 10,
                panning:true,
                mapNavigation: {
              buttons: {
                zoomIn: {
                    // the lower the value, the greater the zoom in
                    onclick: function () { this.mapZoom(0.1); }
                },
                zoomOut: {
                    // the higher the value, the greater the zoom out
                    onclick: function () { this.mapZoom(10); }
                }
              }
              //enableButtons: false
            },
            credits: {
      enabled: false
  },
            title: {
                text: '',
            },
            xAxis: {
                type: 'datetime',
                crosshair: {
                    color: '#335A81',
                    label: {
                        enabled: true,
                        padding: 8,
                        format: '{value: %H:%M:%S}'
                    }
                },
                minTickInterval: 1000 * 60, //one minute

                gridLineWidth: 0.1,
                plotLines: [{
                value: pur_time, // Value of where the line will appear
                width: 2 ,
                color: '#656568',
                dashStyle: 'dash',
                id: 'plotline',
                label: {
                          text: 'Purchase deadline',
                          verticalAlign: 'top',
                          textAlign: 'center',
                          rotation: 270,
                          x: -5,
                          y: 50,
                          style: {
                            color: '#656568',
                            fontWeight: 'bold'
                          }
                        }
            },{
                value: exp_time, // Value of where the line will appear
                width: 2 ,
                color: '#A28F29',
                id: 'plotline1',
                label: {
                          text: 'Expiration time',
                          verticalAlign: 'top',
                          textAlign: 'center',
                          rotation: 270,
                          x: -5,
                          y: 50,
                          style: {
                            color: '#686A3B',
                            fontWeight: 'bold'
                          }
                        }
            }]
            },
            yAxis: {

                title: {  
                    text: '',

                },
                opposite: true,
                crosshair: {
                  color: '#335A81',
                    label: {
                        enabled: true,
                        format: '{value:.2f}'
                    }
                },
                gridLineWidth: 0.1,
                labels: {
                    align: 'right',
                    x: 10
                },
                 opposite: true,
                minorGridLineWidth: 0,

            },

            tooltip: { enabled: false },
            legend: {
                enabled: false
            },
            plotOptions: {
                series: {
                    enableMouseTracking: true
                },
                area: {
                    fillColor: {
                        linearGradient: {
                            x1: 0,
                            y1: 0,
                            x2: 0,
                            y2: 1
                        },
                        stops: [
                            [0, Highcharts.getOptions().colors[0]],
                            [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                        ]
                    },
                    lineWidth: 1,
                    states: {
                        hover: {
                            lineWidth: 1
                        }
                    },
                    threshold: null,
                    marker: {
                      enabled: false
                    }
                }
            },
            exporting: {
                enabled: false
            },
            series: [{
                name: 'Random data',
                type: 'area',
                color: '#0AB9F1',
                data: (function() {
                    // generate an array of random data
                    var data = [],
                        time = (new Date()).getTime(),
                        i;

                    for (i = -999; i <= 0; i++) {
                        data.push([
                            time + i * 6000,
                            Math.random()*100,
                            Math.random()*100,
                            Math.random()*100,
                            Math.random()*100
                            ]);
                    }
                    return data;
                })()},{data:[{ x:14654694989093 , y: 50,y: 52,y: 56,y: 57}], color: 'rgba(0,0,0,0)',enableMouseTracking:true}]

        });

我有四个不同的id来渲染具有相同数据的图表

0 个答案:

没有答案