$ .jqplot如何使一个y轴偏向两个x轴

时间:2018-05-30 10:59:55

标签: jquery html5 jqplot

如何做某事like this

例如:9:0010:00之间的数量为10

我该怎么办?我尝试了很多方法,几乎​​都没有。

var data = [
  ['2008-06-29 7:00', 3],
  ['2008-06-29 8:00', 2],
  ['2008-06-29 9:00', 5],
  ['2008-06-29 11:00', 20],
  ['2008-06-29 12:00', 70],
  ['2008-06-29 13:00', 90],
  ['2008-06-29 14:00', 100],
  ['2008-06-29 15:00', 300],
  ['2008-06-29 16:00', 70],
  ['2008-06-29 17:00', 10],
  ['2008-06-29 18:00', 9],
  ['2008-06-29 19:00', 10],
  ['2008-06-29 20:00', 20],
  ['2008-06-30 7:00', 12],
  ['2008-06-30 8:00', 30],
  ['2008-06-30 9:00', 6],
  ['2008-06-30 10:00', 12],
  ['2008-06-30 11:00', 90],
  ['2008-06-30 12:00', 5],
  ['2008-06-30 13:00', 5]
];

var linetitle = ["fisrtLine"];
var chartTitle = "wodetubiao";
/*var x_ticks =["3", "2", "5", "20", "70", "90", "100", "300", "70", "10", "9", "10", "20", "12", "30", "6", "12", "90", "5", "5"];*/
var x_ticks = ["2008-06-29 7:00", "2008-06-29 8:00", "2008-06-29 9:00", "2008-06-29 11:00", "2008-06-29 12:00"];
var x_label = "X";
var y_label = "Y";
var y_max = 30;

var jqplotchart = {
  jqplot: {}
};

jqplotchart.jqplot.diagram = {
  base: function(document, data, linetitle, chartTitle, x_ticks, x_label, y_label, y_max, type) {
    var renderer;
    if (type == 1) {
      renderer = $.jqplot.BlockRenderer;
    } else if (type == 2) {
      renderer = $.jqplot.BarRenderer;
    } else {
      alert("")
    }
    var plot1 = $.jqplot(document, [data], {
      title: chartTitle,
      legend: {
        show: true,
        labels: linetitle,
        placement: 'outsideGrid'
      },
      animate: true,
      seriesDefaults: {
        renderer: renderer,
        rendererOptions: {
          barWidth: 20,
        },
        //fill: true, 
        pointLabels: {
          show: true,
        },
      },
      axes: {
        xaxis: {
          renderer: $.jqplot.DateAxisRenderer, //DateAxisRenderer, 
          rendererOptions: {
            tickRenderer: $.jqplot.CanvasAxisTickRenderer
          },
          //numberTicks: 10,
          /*rendererOptions:{                    
             tickRenderer:$.jqplot.DateAxisRenderer
          },*/
          //ticks: x_ticks,
          tickOptions: {
            //labelPosition: 'start',
            //angle: -30,           
            formatString: '%R', //%m-%d

          },
          label: x_label == null ? "" : x_label,
          tickInterval: "2 hours",
          //min: chLines[0][0][0],
          //max: chLines[0][0][chLines[0].length-1]
          //min: x_ticks[0]
        },
        yaxis: {
          label: y_label == null ? "" : y_label,
          min: 0
          //max:y_max
        },
      },
      series: [{
        lineWidth: 3,
        color: '#5FAB78'
      }],
      cursor: {
        show: true,
        followMouse: true,
      },
      highlighter: {
        show: true,
        sizeAdjust: 10
      },
    });
  }
};
jqplotchart.jqplot.diagram.base("chart1", data, linetitle, chartTitle, x_ticks, x_label, y_label, y_max, 1);

jqplotchart.jqplot.diagram.base("chart2", data, linetitle, "wodezhuzhuangtu", x_ticks, x_label, y_label, y_max, 2);

//jqplotchart.jqplot.diagram.base("chart2", data, linetitle, "wodebingxingtu", x_label, y_label, y_max, 3);
}

0 个答案:

没有答案