简体   繁体   中英

jqplot line chart point label

I should show value of graphic`s labels. Now it work only when hover. 在此处输入图片说明

$.jqplot("projects_profit1", [s2, s1], {
                // Turns on animatino for all series in this plot.
                animate: true,
                // Will animate plot on calls to plot1.replot({resetAxes:true})
                animateReplot: true,
                cursor: {
                    show: true,
                    zoom: false,
                    looseZoom: false,
                    showTooltip: false
                },
                series: [
                    {
                        pointLabels: {
                            show: true
                        },
                        renderer: $.jqplot.BarRenderer,
                        showHighlight: false,
                        yaxis: 'y2axis',
                        rendererOptions: {
                            // Speed up the animation a little bit.
                            // This is a number of milliseconds.
                            // Default for bar series is 3000.
                            animation: {
                                speed: 2500
                            },
                            barWidth: 15,
                            barPadding: -15,
                            barMargin: 0,
                            highlightMouseOver: false
                        },
                    },
                    {
                        rendererOptions: {
                            // speed up the animation a little bit.
                            // This is a number of milliseconds.
                            // Default for a line series is 2500.
                            animation: {
                                speed: 2000
                            }
                        }
                    }
                ],
                axesDefaults: {
                    pad: 0
                },
                axes: {
                    // These options will set up the x axis like a category axis.
                    xaxis: {
                        renderer: $.jqplot.CategoryAxisRenderer,
                        ticks: labels

                    },
                    y2axis: {
                        rendererOptions: {
                            // alignTicks: true,
                            forceTickAt0: true
                        },
                        min: 0,
                        max: maxCount + 2,
                        tickInterval: 1,
                        tickOptions: {
                            // formatString: '%d',
                            fontSize: '14pt',
                        },
                        pointLabels: {
                            show: true,
                            showLabel: true,

                        },
                        showLabel: true,
                    },
                    yaxis: {
                        rendererOptions: {
                            // align the ticks on the y2 axis with the y axis.
                            forceTickAt0: true,
                        },
                        tickOptions: {
                            formatString: '%d',
                            fontSize: '14pt',
                        }
                    }
                },
                highlighter: {
                    show: true,
                    showLabel: true,
                    tooltipAxes: 'y',
                    sizeAdjust: 7.5, tooltipLocation: 'ne'
                }
            });

My first array contains citys and counts(value label of horizontal line) My second array contains city and some values. I want show this values like on horizontal lines. How to show value labels on the orange graphic? How to show legend for the graph?

U should add seriesDefaults: {pointLabels: { show:true }}. like this

plot1 = $.jqplot("projects_profit1", [s2, s1], {
                // Turns on animatino for all series in this plot.
                animate: true,
                // Will animate plot on calls to plot1.replot({resetAxes:true})
                animateReplot: true,
                cursor: {
                    show: true,
                    zoom: false,
                    looseZoom: false,
                    showTooltip: false
                },
                seriesDefaults: {
                    pointLabels: { show:true }
                },
                series: [
                    {
                        pointLabels: {
                            show: true
                        },
                        renderer: $.jqplot.BarRenderer,
                        showHighlight: false,
                        yaxis: 'y2axis',
                        rendererOptions: {
                            // Speed up the animation a little bit.
                            // This is a number of milliseconds.
                            // Default for bar series is 3000.
                            animation: {
                                speed: 2500
                            },
                            barWidth: 15,
                            barPadding: -15,
                            barMargin: 0,
                            highlightMouseOver: false
                        },
                    },
                    {
                        rendererOptions: {
                            // speed up the animation a little bit.
                            // This is a number of milliseconds.
                            // Default for a line series is 2500.
                            animation: {
                                speed: 2000
                            }
                        }
                    }
                ],
                axesDefaults: {
                    pad: 0
                },
                axes: {
                    // These options will set up the x axis like a category axis.
                    xaxis: {
                        renderer: $.jqplot.CategoryAxisRenderer,
                        ticks: labels

                    },
                    y2axis: {
                        rendererOptions: {
                            // alignTicks: true,
                            forceTickAt0: true
                        },
                        min: 0,
                        max: maxCount + 2,
                        tickInterval: 1,
                        tickOptions: {
                            // formatString: '%d',
                            fontSize: '14pt',
                        },
                        pointLabels: {
                            show: true,
                            showLabel: true,

                        },
                        showLabel: true,
                    },
                    yaxis: {
                        rendererOptions: {
                            // align the ticks on the y2 axis with the y axis.
                            forceTickAt0: true,
                        },
                        tickOptions: {
                            formatString: '%d',
                            fontSize: '14pt',
                        }
                    }
                },
                highlighter: {
                    show: true,
                    showLabel: true,
                    tooltipAxes: 'y',
                    sizeAdjust: 7.5, tooltipLocation: 'ne'
                }
            });

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM