jqplot折线图点标签

时间:2019-12-30 10:03:30

标签: javascript jquery jqplot

我应该显示图形标签的价值。现在,它仅在悬停时有效。enter image description here

$.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'
                }
            });

我的第一个数组包含城市和计数(水平线的值标签) 我的第二个数组包含city和一些值。我想在水平线上显示此值。 如何在橙色图形上显示值标签? 如何显示图例?

1 个答案:

答案 0 :(得分:0)

U应该添加seriesDefaults:{pointLabels:{show:true}}。 像这样

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'
                }
            });