jqPlot не строит правильный график - PullRequest
Новая
       28

jqPlot не строит правильный график

0 голосов
/ 13 января 2020

Я новичок в библиотеке jqplot, я использую следующий код для построения графика jqplot, но он не печатает 

$(document).ready(function () {
         var cdata = [];

        cdata.push([1.1, '01/13/2020 17:16']);

        cdata.push([2.9, '01/12/2020 17:16']);

        cdata.push([1.2, '01/11/2020 17:16']);

        cdata.push([3.6, '01/10/2020 17:16']);

        cdata.push([6.7, '01/09/2020 17:16']);

        cdata.push([8.8, '01/08/2020 17:16']);

        cdata.push([5.5, '01/07/2020 17:16']);

        cdata.push([7.4, '01/06/2020 17:16']);

        cdata.push([4.3, '01/05/2020 17:16']);

var plot2 = $.jqplot('chart2', cdata, {
        // Give the plot a title.
        title: 'Graph Monitor',
    // You can specify options for all axes on the plot at once with
    // the axesDefaults object.  Here, we're using a canvas renderer
    // to draw the axis label which allows rotated text.
    axesDefaults: {
            labelRenderer: $.jqplot.CanvasAxisLabelRenderer
    },
    // Likewise, seriesDefaults specifies default options for all
    // series in a plot.  Options specified in seriesDefaults or
    // axesDefaults can be overridden by individual series or
    // axes options.
    // Here we turn on smoothing for the line.
    seriesDefaults: {
            rendererOptions: {
                smooth: true
                }
            },
    // An axes object holds options for all axes.
    // Allowable axes are xaxis, x2axis, yaxis, y2axis, y3axis, ...
    // Up to 9 y axes are supported.
    axes: {
            // options for each axis are specified in seperate option objects.
            xaxis: {
                label: "Date",
            // Turn off "padding".  This will allow data point to lie on the
            // edges of the grid.  Default padding is 1.2 and will keep all
            // points inside the bounds of the grid.
            pad: 0
                },
        yaxis: {
                label: "Level"
        }
            }
        });

});

fiddle: https://jsfiddle.net/a5fmbyv2/

1 Ответ

2 голосов
/ 13 января 2020

У вас есть несколько небольших проблем, которые нужно исправить:

  1. Ваши xaxes должны быть Date, но вы вместо этого поместили значения воды. Также дата должна быть в стандартном формате ГГГГ-ММ-ДД (не обязательно, но лучше) и поэтому вместо [1.1, '01/13/2020 17:16] должна указывать ['2020-01-13 17:16', 1.1].

  2. Вы должны использовать renderer: $.jqplot.DateAxisRenderer для дат (ссылка ниже).

  3. Ваш ряд данных должен быть заключен в массив, что означает, что вместо $.jqplot('chart2', cdata, options) вы должны поставить $.jqplot('chart2', [cdata], options).

Все вместе: 

var cdata = [];
cdata.push(['2020-01-13 17:16', 1.1]);
cdata.push(['2020-01-12 17:16', 2.9]);
cdata.push(['2020-01-11 17:16', 1.2]);
cdata.push(['2020-01-10 17:16', 3.6]);
cdata.push(['2020-01-09 17:16', 6.7]);
cdata.push(['2020-01-08 17:16', 8.8]);
cdata.push(['2020-01-07 17:16', 5.5]);
cdata.push(['2020-01-06 17:16', 7.4]);
cdata.push(['2020-01-05 17:16', 4.3]);

var plot2 = $.jqplot('chart2', [cdata], {
  // Give the plot a title.
  title: 'Graph Monitor',
  // You can specify options for all axes on the plot at once with
  // the axesDefaults object.  Here, we're using a canvas renderer
  // to draw the axis label which allows rotated text.
  axesDefaults: {
    labelRenderer: $.jqplot.CanvasAxisLabelRenderer
  },
  // Likewise, seriesDefaults specifies default options for all
  // series in a plot.  Options specified in seriesDefaults or
  // axesDefaults can be overridden by individual series or
  // axes options.
  // Here we turn on smoothing for the line.
  seriesDefaults: {
    rendererOptions: {
      smooth: true
    }
  },
  // An axes object holds options for all axes.
  // Allowable axes are xaxis, x2axis, yaxis, y2axis, y3axis, ...
  // Up to 9 y axes are supported.
  axes: {
    // options for each axis are specified in seperate option objects.
    xaxis: {
    	renderer: $.jqplot.DateAxisRenderer, 
      tickOptions:{formatString:'%b %#d'}, 
      label: "Date",
      // Turn off "padding".  This will allow data point to lie on the
      // edges of the grid.  Default padding is 1.2 and will keep all
      // points inside the bounds of the grid.
      pad: 0
    },
    yaxis: {
      label: "Water Level"
    }
  }
});
body {
  background: white;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.canvasTextRenderer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.canvasAxisLabelRenderer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.dateAxisRenderer.min.js"></script>
<div class="wrapper col-12" id="chart2"></div>

Вы можете найти примеры дат jqplot здесь и все библиотеки jqplot CDN здесь .

Для форматов отображения даты, пожалуйста, проверьте эту ссылку .

Все также на JSFiddle .

...