Как я могу отобразить гистограмму с накоплением jqplot, когда xaxis является текстом? - PullRequest
Новая
       17

Как я могу отобразить гистограмму с накоплением jqplot, когда xaxis является текстом?

5 голосов
/ 20 октября 2011

Я не могу собрать гистограмму jqplot в стек.У меня есть следующий код: 

// Pass/Fail rates per request
$.jqplot('passFailPerRequestStats', [passRate, failRate], {
    title: 'Automation Pass Count Per Test Plan',
    //stackSeries: true,
    seriesDefaults: {
        renderer: $.jqplot.BarRenderer,
        renderOptions: { barMargin: 25 },
        pointLabels: { show: true, stackedValue: true }
    },
    axesDefaults: {
        tickRenderer: $.jqplot.CanvasAxisTickRenderer,
        tickOptions: {
            angle: -30,
            fontSize: '10pt'
        }
    },
    axes: {
        xaxis: {
            renderer: $.jqplot.CategoryAxisRenderer
        }
    }
});

Это успешно отображает рядом столбчатую диаграмму для обеих серий.Однако, когда я пытаюсь составить их, раскомментировав stackSeries: true,, все гистограммы снимаются с графика (и все метки точек отображаются на метках оси Y).

Что я делаю не так?

Ответы [ 2 ]

8 голосов
/ 25 октября 2011

Вам необходимо включить barDirection в свой объект rendererOptions. 

 rendererOptions: {
                barDirection: 'vertical',
                highlightMouseDown: true    
            }

Обязательно добавляйте запятую после последней скобки, если после этого появятся дополнительные параметры.Для стека также необходимо указать xaxis.

Ваша структура данных должна выглядеть следующим образом.с начальным номером в каждом элементе, указывающим ось X. 

var s1 = [[1,1],[2,2],[3,3],[4,4],[5,5],[6,6],[7,7],[8,8],[9,9],[10,10],[11,11],[12,12]];
    var s2 = [[1,12],[2,11],[3,10],[4,9],[5,8],[6,7],[7,6],[8,5],[9,4],[10,3],[11,2],[12,1]];
    var s3 = [[1,1],[2,2],[3,3],[4,4],[5,5],[6,6],[7,7],[8,8],[9,9],[10,10],[11,11],[12,12]];
    var months = ['Jan', 'Feb', 'Mar', 'Apr',"May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
    plot4 = $.jqplot('chartdiv', [
    s1,
    s2,
    s3
    ],

Используйте месяцы (или любой другой текст) в опции «галочки:», например, так. 

xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: months
            }
1 голос
/ 18 июля 2013

Я добавляю это решение, поскольку обнаружил, что ранее опубликованное решение не работает в моей среде (хотя оно поставило меня на правильный путь, поэтому спасибо @Jack) - Следующее сработало для меня на сайте ASP.NET MVC3 запуск jqPlot 1.0.8r1250 с JQuery 1.9.1 и JQuery UI 1.1O.3:

Для меня добавление рендера rendererOptions{...} оказалось ненужным.

Я также обнаружил, что stackedValue: true под узлом seriesDefaults > pointLabels не имел никакого эффекта, вместо этого мне пришлось раскомментировать stackSeries: true под корневым узлом.

Мой окончательный код: 

var s1 = [[1, 1], [2, 2], [3, 3], [4, 4], [5, 5], [6, 6], [7, 7], [8, 8], [9, 9], [10, 10], [11, 11], [12, 12]];
var s2 = [[1, 12], [2, 11], [3, 10], [4, 9], [5, 8], [6, 7], [7, 6], [8, 5], [9, 4], [10, 3], [11, 2], [12, 1]];
var s3 = [[1, 1], [2, 2], [3, 3], [4, 4], [5, 5], [6, 6], [7, 7], [8, 8], [9, 9], [10, 10], [11, 11], [12, 12]];

var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

$.jqplot('chartdiv', [s1, s2, s3], {
    title: 'Automation Pass Count Per Test Plan',
    stackSeries: true,
    seriesDefaults: {
        renderer: $.jqplot.BarRenderer,
        renderOptions: { barMargin: 25 }
    },
    axesDefaults: {
        tickRenderer: $.jqplot.CanvasAxisTickRenderer,
        tickOptions: {
            angle: -30,
            fontSize: '10pt'
        }
    },
    axes: {
        xaxis: {
            renderer: $.jqplot.CategoryAxisRenderer,
            ticks: months
        }
    }
});

Также убедитесь, что вы включили следующие ссылки: 

<script src="/.../jquery.jqplot.min.js" type="text/javascript"></script>
<script src="/.../jqplot.barRenderer.min.js" type="text/javascript"></script>
<script src="/.../jqplot.canvasTextRenderer.min.js" type="text/javascript"></script>
<script src="/.../jqplot.dateAxisRenderer.min.js" type="text/javascript"></script>
<script src="/.../jqplot.canvasAxisTickRenderer.min.js" type="text/javascript"></script>
<script src="/.../jqplot.categoryAxisRenderer.min.js" type="text/javascript"></script>
<script src="/.../jqplot.canvasAxisLabelRenderer.min.js" type="text/javascript"></script>

Надеюсь, что это поможет кому-то в будущем

...