带日期的 jqplot 折线图

Question

您好，我正在尝试在 jqplot 中创建简单的折线图，x 轴为日期，y 轴为值，一切正常，但图形绘制不正确我的代码如下

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
    <title>Chart</title>
    <meta charset="UTF-8">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js"></script>
    <script src="http://www.jqplot.com/deploy/dist/jquery.jqplot.min.js"></script>
    <script src="http://www.jqplot.com/deploy/dist/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
    <script src="http://www.jqplot.com/deploy/dist/plugins/jqplot.canvasTextRenderer.min.js"></script>
    <script src="http://www.jqplot.com/deploy/dist/plugins/jqplot.dateAxisRenderer.min.js"></script>
    <script src="http://www.jqplot.com/deploy/dist/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
</head>
<body>
  <div id="test_chart" style="width:880px; height:350px;margin-top: 30px;"></div>  
     <script>
        $.jqplot ('test_chart',[[10,20,12]],
        {
         title: 'Example',
            axesDefaults: {
             labelRenderer: $.jqplot.CanvasAxisLabelRenderer
            },
            seriesDefaults: {
            showMarker:true,
            pointLabels: { show:true } ,
            rendererOptions: {
             smooth: true
            }
            },
        axes: {
               xaxis: {
                        renderer:$.jqplot.DateAxisRenderer,
                        tickRenderer:$.jqplot.CanvasAxisTickRenderer,
                        tickOptions:
                          { 
                        angle: -90,
                         formatString:'%d-%m-%Y'
                          },                       
                        label: 'Date',
                        ticks : ['2016-10-01','2016-10-02','2016-10-03'],
                        pad:2
                       },
                yaxis: {
                label: 'value',
                ticks : ['0','5','10','15','20','25','30','35']                 
                }
                }                               
        }); 
      </script>
</body>     
</html>

请指导我使用jqplot画图

Answer 1

首先……
为了在 CodePen 上重现问题，我不得不使用 cdnjs.com 中的库，因为除了控制台中的红线外什么都没有发生。

所以也许你也应该使用这些 (!)。
请注意，我还使用了最新的 jQuery 和 jQuery-UI.

然后，我看到一个图形背景出现了......但是没有任何线条或任何东西。

所以，看了一些examples here，我发现你在给猛兽提供数据的路上完全错了

您输入的数据是：

$.jqplot ('test_chart',[[10,20,12]],

需要的是：

var arr = [['2016-10-01',10],['2016-10-02',20],['2016-10-03',12]];

$.jqplot ('test_chart',[arr],

OR（如果你真的不喜欢先在数组中定义数据...）：

$.jqplot ('test_chart',[[['2016-10-01',10],['2016-10-02',20],['2016-10-03',12]]],

你注意到括号内的金额了吗？
此外，您是否注意到每个 X 轴值都与此数组中的一个 Y 轴值相关联？

那是你的主要问题。
加上奇怪的 cdns 和缺少的 $(document).ready({ 包装器。

那么现在，看看 this codePen
中的工作图并享受绘制图表的乐趣...
;)

带日期的 jqplot 折线图

jqplot line chart with date

jquery

charts

rendering

jqplot

axis-labels