如何在使用CategoryAxis Renderer时使用'ticks'选项

时间:2013-06-18 19:25:55

标签: javascript jquery graph jqplot

我正在尝试绘制折线图,​​我正在使用CategoryAxisRenderer。 我想在ticks选项

中指定刻度

Code link: jsfiddle

$.jqplot.config.enablePlugins = true;
var chartData = [["19-Jan-2012", 2.61], ["20-Jan-2012", 5.00], ["21-Jan-2012", 6.00]];

function PlotChart(chartData, extraDays) {


    var plot2 = $.jqplot('chart1', [chartData], {
        title: 'Mouse Cursor Tracking',
        seriesDefaults: {
            renderer: $.jqplot.LineRenderer,

            pointLabels: {
                show: true
            }
        },
        axes: {
            xaxis: {
                pad: 1,            
                renderer: $.jqplot.CategoryAxisRenderer 
                ,ticks:["19-Jan-2012","20-Jan-2012","21-Jan-2012"]

            },
            yaxis: {
                tickOptions: {
                    formatString: '$%.2f'
                }
            }
        },
        highlighter: {
            sizeAdjust: 7.5
        },
        cursor: {
            show: true
        }
    });
}

PlotChart(chartData, 3);

如果我注释掉ticks选项,上面的代码就可以了。 但是,如果激活ticks选项,则不会在图表上显示该行。

1 个答案:

答案 0 :(得分:1)

我将数据更改为var chartData = [ 2.61, 5.00, 6.00];
现在它工作正常See Example

代码

$.jqplot.config.enablePlugins = true;
var chartData = [ 2.61, 5.00, 6.00];

function PlotChart(chartData, extraDays) {


    var plot2 = $.jqplot('chart1', [chartData], {
        title: 'Mouse Cursor Tracking',
        seriesDefaults: {
            renderer: $.jqplot.LineRenderer,

            pointLabels: {
                show: true
            }
        },
        axes: {
            xaxis: {
                pad: 1,
                // a factor multiplied by the data range on the axis to give the            
                renderer: $.jqplot.CategoryAxisRenderer,
                // renderer to use to draw the axis,  
               ticks:["19-Jan-2012","20-Jan-2012","21-Jan-2012"]

            },
            yaxis: {
                tickOptions: {
                    formatString: '$%.2f'
                }
            }
        },
        highlighter: {
            sizeAdjust: 7.5
        },
        cursor: {
            show: true
        }
    });
}

PlotChart(chartData, 3);