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折线图

1 个答案: