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

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

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

Ожидаемый результат

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

$.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%, ничего не будет отображаться. И точки отображаются как целое число.

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

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

Пример вывода 1

Пример вывода 2

Спасибо :)


jquery asp.net graph jquery-plugins jqplot
person Carls Jr.    schedule 15.04.2011    source источник
comment
Во-первых, \% не является допустимой escape-последовательностью в JavaScript, поэтому вам, вероятно, придется использовать вместо нее {formatString:'%d%'}.   -  person Matt Ball    schedule 15.04.2011
comment
Кроме того, я не могу понять, как этот код генерирует примеры выходных данных.   -  person Matt Ball    schedule 15.04.2011

Ответы (2)


arrow_upward
2
arrow_downward

Каким-то образом мне удалось решить мою проблему с помощью @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');
person Carls Jr.    schedule 15.04.2011

arrow_upward
1
arrow_downward

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

крайДопуск

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

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

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

person Matt Ball    schedule 15.04.2011
comment
Привет, Мэтт, код, который я разместил, на самом деле отображает первое изображение образца вывода, которое у меня есть. Я только что отредактировал значения voiceResults и заметил, что все параметры, которые я передал, были строками, поэтому процент не вступил в силу. Я также пересмотрел свой код сейчас, и в настоящее время я использую ваш код, благодаря вам. Выложу рабочий код. - person Carls Jr.; 15.04.2011
comment
Кроме того, edgeTolerance, похоже, не решает мою проблему, поэтому я попытался расположить div в центре, выбрав контейнер jqplot-point-label и расположив его в центре. - person Carls Jr.; 15.04.2011