JQPlot - переместить метку точки в начальную точку графика - PullRequest
Новая
       32

JQPlot - переместить метку точки в начальную точку графика

1 голос
/ 15 апреля 2011

Я работал над горизонтальной гистограммой jqplot.

Я ХОЧУ ИМЕТЬ ЭТОТ ВЫХОД (Я хотел, чтобы метки точек были в процентах и ​​должны располагаться в начальной точке графика)

Expected Outpt

Вот мой код ..... 

$.jqplot.config.enablePlugins = true;

voteResults = [[Chinabank,0],['Citibank',100], ['UOB',0]['POSB',0],['OCBC',0]];
// voteResults = [[Chinabank,50],['Citibank',50], ['UOB',0]['POSB',0],['OCBC',0]];

plot = $.jqplot('chart1', [voteResults], {
    seriesDefaults:{
        renderer:$.jqplot.BarRenderer,
        shadowAngle: 135,
        rendererOptions: {
            barDirection: 'horizontal',
            barWidth:15,
            barMargin: 25
        }
    },
    axes: {
        yaxis: {
            renderer: $.jqplot.CategoryAxisRenderer,
            tickOptions:{
                showGridline:true,
                markSize:0
            }
        },
        xaxis:{
            ticks:[0,100],
            tickOptions:{formatString:'%d\%'}
        }
    }
});

Прямо сейчас метки точек отображаются после конца полосыграфик, и если значение точки где-то около 100%, он ничего не отобразит.И очки отображаются в виде целого числа.

Есть ли способ, которым я мог бы переместить точки рядом с начальной точкой гистограммы?

Приведенный выше код отображает эти примеры выходных данных ... Я надеюсь, что вы можете помочь мне решить мою проблему :(

Sample Output 1

Sample Output 2

Спасибо:)

Ответы [ 2 ]

2 голосов
/ 15 апреля 2011

Каким-то образом мне удалось решить мою проблему с помощью @Matt, а также я добавил несколько строк кода, чтобы удовлетворить требования, которые я собираюсь выполнить. Вместо того, чтобы размещать метки точек в начальной точке гистограммы, я поместил ее в центр, чтобы сделать ее более читабельной и презентабельной.

Вот мой код: (Я открыт для предложений, если вы считаете, что у вас есть лучшее решение) спасибо 

var plot = $.jqplot('PollChart', [voteResults], {
    seriesDefaults: {
        renderer: $.jqplot.BarRenderer,
        pointLabels: { show: true, location: 'e', edgeTolerance: -50 },
        shadowAngle: 135,
        rendererOptions: {
            barDirection: 'horizontal',
            barWidth: 15,
            barMargin: 25
        }
    },
    axes: {
        yaxis: {
            renderer: $.jqplot.CategoryAxisRenderer,
            tickOptions: {
                showGridline: true,
                markSize: 0
            }
        },
        xaxis: {
            ticks: [0, 100],
            tickOptions: {
                formatString: '%d%',
                showGridline: false
            }
        }
    }
});

// these lines here positions the Point Labels at the center of the graph
var ChartStartingPoint = parseInt($('#PollChart .jqplot-series-canvas').css('left'),10);
var ChartWidth = parseInt($('#PollChart .jqplot-series-canvas').css('width'),10);
var PointLabelLocation = (ChartWidth/2)+ ChartStartingPoint;
$('#PollChart .jqplot-point-label').css('left',PointLabelLocation+'px');
1 голос
/ 15 апреля 2011

Чтобы разрешить меткам отображаться, когда полоса близка к 100%, используйте параметр PointLabels edgeTolerance.

edgeTolerance

Количество пикселейчтобы метка была отодвинута от границы оси, чтобы ее можно было нарисовать.Отрицательные значения позволят перекрывать границы сетки.

Поскольку я прокомментировал ваш вопрос, я не уверен, что вы действительно разместили код, который вы использовали для генерации этих диаграмм. Здесь - это прямой дамп этого кода (с исправленными опечатками), а здесь - самое близкое к вашим фотографиям,и это с большим количеством изменений в вашем исходном коде.

Не забудьте опубликовать jsfiddle, который показывает, как вы сгенерировали эти примеры?

...