Получить линейное распределение по тикам линейного графика jqplot

Я хотел бы предоставить tickInterval для визуализации диаграммы jqPlot, чтобы получить линейное распределение по оси x.

 $.jqplot.config.enablePlugins = true;
    var chartData = [[1, 224], [3, 672], [5, 1120],[15,2240]];

    function PlotChart(chartData) {


    var plot2 = $.jqplot('chart1', [chartData], {
        title: 'Mouse Cursor Tracking',
        seriesDefaults: {
            renderer: $.jqplot.CanvasAxisLabelRenderer,
            rendererOptions: {
                smooth: true
            },
            pointLabels: {
                show: true
            }
        },
        axes: {
            xaxis: {
                label: 'Number of Cookies',
                renderer: $.jqplot.CategoryAxisRenderer,
                // renderer to use to draw the axis,     
                tickOptions: {
                    formatString: '%d'
                }
            },
            yaxis: {
                label: 'Calories',
                tickOptions: {
                    formatString: '%.2f'
                }
            }
        },
        highlighter: {
            sizeAdjust: 7.5
        },
        cursor: {
            show: true
        }
   });
} PlotChart(chartData);

пример jsfiddle

Выше приведен пример графика, как он выглядит на данный момент.
Я хотел бы предоставить точки 1, 5, 10, 15, 20 на xaxis (tickInterval - 5) и по отношению к 1,3,5,15 графики должны быть в координатной плоскости для отображения значений [[1, 224], [3, 672], [5, 1120], [15,2240]]

Где в настоящее время он распределяется в соответствии с xticks, что неравномерно. Любая помощь приветствуется!

Я пытался получить его, используя свойства min/max и tickInterval, но похоже, что это не работает.


javascript jquery charts linechart jqplot
person Mutant    schedule 07.07.2013    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Если вы хотите предоставить tickIntervals по оси X, вы можете сделать это следующим образом.

$.jqplot.config.enablePlugins = true;
var chartData = [[1, 224], [3, 672], [5, 1120],[15,2240]];

function PlotChart(chartData) {

var plot2 = $.jqplot('chart1', [chartData], {
    title: 'Mouse Cursor Tracking',
    seriesDefaults: {
        renderer: $.jqplot.CanvasAxisLabelRenderer,
        rendererOptions: {
            smooth: true
        },
        pointLabels: {
            show: true
        }
    },
    axes: {
        xaxis: {
            label: 'Number of Cookies',
            min:0,
            max:20,
            tickInterval:5,
            // renderer to use to draw the axis,     
            tickOptions: {
                formatString: '%d'
            }
        },
        yaxis: {
            label: 'Calories',
            tickOptions: {
                formatString: '%.2f'
            }
        }
    },
    highlighter: {
        sizeAdjust: 7.5
    },
    cursor: {
        show: true
    }
});
}
PlotChart(chartData);

ссылка jsFiddle

Вы можете рассчитать min, max и tickInterval перед построением графика. Надеюсь, это поможет.

person Gyandeep    schedule 08.07.2013
comment
Ваш код работает нормально. Но похоже, что предоставленная вами ссылка jsFiddle взята из моего примера, поэтому она не отражает изменения. Вот обновленный — jsfiddle.net/jpatel/EWJLb. - person Mutant; 08.07.2013

arrow_upward
0
arrow_downward

НЕ используя renderer: $.jqplot.CategoryAxisRenderer, вы добьетесь своего

person maniek765    schedule 30.12.2013