как да промените етикета на jqplot подредена хоризонтална лентова диаграма

Използвам jqplot, за да създам подредена хоризонтална лентова диаграма, използвайки кода, показан тук:

perc_data = [[[6, "1"]], [[92, "1"]], [[1, "1"]], [[1, "1"]]];
series_array = [ { label: "Mud", color: "#ccaa00"}, { label: "Sand", color: "#ffeecc"}, 
                 { label: "Gravel", color: "#dddddd"}, { label: "Rock", color: "#664400"} ];
var perc_chart = $.jqplot('perc_div', perc_data, {
    stackSeries: true,
    seriesDefaults: {
        renderer:$.jqplot.BarRenderer,
        shadowAngle: 135,
        rendererOptions: {  barWidth: 25,
                            barDirection: 'horizontal',
        }
    },
    series: series_array,
    axes: {
        yaxis: {
            renderer: $.jqplot.CategoryAxisRenderer,
            rendererOptions: {  tickRenderer: $.jqplot.AxisTickRenderer, 
                                tickOptions: {  mark: null,
                                                fontSize: 12
                                             }
            }
        },
        xaxis: {
            min: 0,
            max: 100,
            numberTicks: 6
        }
    },
    grid: {
        drawGridlines: false,
        drawBorder: false,
        shadow: false
    }
});

Получената лентова диаграма изглежда така:

въведете описание на изображението тук

Това, което бих искал да направя след това, е да променя етикета на лентата от „1“ на „Моят етикет“. Бих си помислил, че мога просто да променя perc_data от първоначалната му стойност на следното:

perc_data = [[[6, "My Label"]], [[92, "My Label"]], [[1, "My Label"]], [[1, "My Label"]]];

Но това води до празна лентова диаграма:

въведете описание на изображението тук

Може ли някой да ми каже какво правя погрешно и как мога да променя този етикет.

Благодаря.


jquery bar-chart jqplot
person sfletche    schedule 05.01.2012    source източник

Отговори (1)


arrow_upward
6
arrow_downward

Използвайте опцията за отметки (2-ри пример на тази страница):

perc_data = [[[6, "1"]], [[92, "1"]], [[1, "1"]], [[1, "1"]]];
ticks = ["My Label"];

series_array = [ { label:'Mud', color:"#ccaa00"}, { label:"Sand", color:"#ffeecc"}, { label:"Gravel", color:"#dddddd"}, { label:"Rock", color:"#664400"} ];

var perc_chart = $.jqplot('chart1', perc_data, {
    stackSeries: true,
    seriesDefaults: {
        renderer:$.jqplot.BarRenderer,
        shadowAngle: 135,
        rendererOptions: {  barWidth: 25,
                            barDirection: 'horizontal',
        }
    },
    series: series_array,
    axes: {
        yaxis: {
            renderer: $.jqplot.CategoryAxisRenderer,
            rendererOptions: {  tickRenderer: $.jqplot.AxisTickRenderer, 
                                tickOptions: {  mark: null,
                                                fontSize: 12
                                             }
            },
            ticks: ticks
        },
        xaxis: {
            min: 0,
            max: 100,
            numberTicks: 6
        }
    },
    grid: {
        drawGridlines: false,
        drawBorder: false,
        shadow: false
    }
});

въведете описание на изображението тук

Между другото, { label="Mud", color="#ccaa00"} не е валиден, javascript трябва да бъде { label:"Mud", color:"#ccaa00"}

person Mark    schedule 06.01.2012
comment
Благодаря Марк! (И благодаря, че хванахте правописната грешка в js - това беше част от опит за опростяване на кода за този пример - актуализирах моя пример с вашата корекция.) - person sfletche; 10.01.2012
comment
+1 @mark Това ми помогна да разбера как да огранича до 100 (опитвах се да използвам forceTickAt100: вярно, но не работи.) Благодаря - person R. Mo; 04.04.2014