使用jqplot库时显示图形轴

Question

我使用jqPlot使用jQuery创建图表。

我想在我的图表中显示Ox和Oy轴（如果可能的话，还有箭头和一些文字）。我怎么能这样做？

我使用以下方式初始化图表：

$.jqplot ('graph', [[[1, 2]]], {
    axesDefaults: {
        labelRenderer: $.jqplot.CanvasAxisLabelRenderer
    }
   , axes: {
         xaxis: {
             label: "U (V)"
            , min: -5
            , max: 5
            , tickOptions: {
                  formatString: "%#.2f"
                , howGridline: false
                , textColor: '#ffffff'
                , fontSize: '12px'
              }
          }
        , yaxis: {
              label: "I (mA)"
            , min: -10
            , max: 20
            , tickOptions: {
                  formatString: "%#.2f"
                , howGridline: false
                , textColor: '#ffffff'
                , fontSize: '12px'
            }
        }
    }
});

看起来像这样：

  

我想象这样的事情：

  

JSFIDDLE

Answer 1

本教程更好地解释了它 http://www.jqplot.com/deploy/dist/examples/canvas-overlay.html

以下是示例：http://www.datafilehost.com/d/f4b6a7b5

你需要画布插件。

$.jqplot ('graph', [[[1, 2]]], {
     axesDefaults: {
        labelRenderer: $.jqplot.CanvasAxisLabelRenderer
    }
   , axes: {
         xaxis: {
             label: "U (V)"
            , min: -5
            , max: 5
            , tickOptions: {
                  formatString: "%#.2f"
                , howGridline: false
                , textColor: '#ffffff'
                , fontSize: '12px'
              }
          }
        , yaxis: {
              label: "I (mA)"
            , min: -10
            , max: 20
            , tickOptions: {
                  formatString: "%#.2f"
                , howGridline: false
                , textColor: '#ffffff'
                , fontSize: '12px'
            }
        }
    },
    canvasOverlay: {
            show: true,
            objects: [
               {dashedVerticalLine: {
                    name: 'bam-bam',
                    x: 0,
                    lineWidth: 1,
                    dashPattern: [16, 12],
                    lineCap: 'round',
                    yOffset: '20px',
                    color: 'rgb(66, 98, 144)',
                    shadow: false
                }}
            ]}
});