jqplot 不显示标签端点

Question

当我使用jqplot绘制图表时，图表的两个端点都没有显示标签，我不知道为什么。请帮忙

这是我的代码（自包含代码，已加载所有资源）

<html>
<head>
</head>
<body>
    <input id="dashboardForm:j_idt49:4:hiddenChartData" type="text" name="dashboardForm:j_idt49:4:hiddenChartData" value="{&quot;data&quot;:[[843,1312,745,683,832,829,772,740,792,672,550,323]],&quot;dateFull&quot;:[[1,&quot;01/06&quot;],[2,&quot;02/06&quot;],[3,&quot;03/06&quot;],[4,&quot;04/06&quot;],[5,&quot;05/06&quot;],[6,&quot;06/06&quot;],[7,&quot;07/06&quot;],[8,&quot;08/06&quot;],[9,&quot;09/06&quot;],[10,&quot;10/06&quot;],[11,&quot;11/06&quot;],[12,&quot;12/06&quot;]],&quot;tick&quot;:[[1,&quot;01/06&quot;],[2,&quot;02/06&quot;],[3,&quot;03/06&quot;],[4,&quot;04/06&quot;],[5,&quot;05/06&quot;],[6,&quot;06/06&quot;],[7,&quot;07/06&quot;],[8,&quot;08/06&quot;],[9,&quot;09/06&quot;],[10,&quot;10/06&quot;],[11,&quot;11/06&quot;],[12,&quot;12/06&quot;]]}" class="soluongdonhangngay170" style="display:none;"> 
    <div style="height: 550px" class="soluongdonhangngay170170" />


<script type="text/javascript" src="http://app.fahasa.com:8084/ReportEngine/org.richfaces.resources/javax.faces.resource/org.richfaces/jquery.js"></script> 
<script type="text/javascript" src="http://app.fahasa.com:8084/ReportEngine/faces/javax.faces.resource/jquery.jqplot.js?ln=js"></script>    
<script type="text/javascript" src="http://app.fahasa.com:8084/ReportEngine/faces/javax.faces.resource/jqplot/jqplot.dateAxisRenderer.js?ln=js"></script>   
<script type="text/javascript" src="http://app.fahasa.com:8084/ReportEngine/faces/javax.faces.resource/jqplot/jqplot.categoryAxisRenderer.js?ln=js"></script>   
<script type="text/javascript" src="http://app.fahasa.com:8084/ReportEngine/faces/javax.faces.resource/jqplot/jqplot.logAxisRenderer.js?ln=js"></script>    
<script type="text/javascript" src="http://app.fahasa.com:8084/ReportEngine/faces/javax.faces.resource/jqplot/jqplot.canvasTextRenderer.js?ln=js"></script> 
<script type="text/javascript" src="http://app.fahasa.com:8084/ReportEngine/faces/javax.faces.resource/jqplot/jqplot.canvasAxisTickRenderer.js?ln=js"></script> 
<script type="text/javascript" src="http://app.fahasa.com:8084/ReportEngine/faces/javax.faces.resource/jqplot/jqplot.canvasAxisLabelRenderer.js?ln=js"></script>    
<script type="text/javascript" src="http://app.fahasa.com:8084/ReportEngine/faces/javax.faces.resource/jqplot/jqplot.highlighter.js?ln=js"></script>    
<script type="text/javascript" src="http://app.fahasa.com:8084/ReportEngine/faces/javax.faces.resource/jqplot/jqplot.pointLabels.js?ln=js"></script>    
<script type="text/javascript" src="http://app.fahasa.com:8084/ReportEngine/faces/javax.faces.resource/jqplot/jqplot.enhancedLegendRenderer.js?ln=js"></script> 
<script>
jQuery(function(){
    var labels = ["Đơn Hàng Theo Ngày"];
  alert(jQuery(".soluongdonhangngay170").val());
  displayLineChartWithToggleLegend($(".soluongdonhangngay170").val(),$(".soluongdonhangngay170170"), labels, "Số Lượng Đơn Hàng Ngày");
});

function displayLineChartWithToggleLegend(data, target, label, chartTitle){
    if(data === "") return;
    var chartJsonData = $.parseJSON(data);
    var dataPlot = chartJsonData.data;
    var ticks = chartJsonData.tick;
    var showPointLabel = true;
    if(chartJsonData.data.length > 4){
        showPointLabel = false;
    }
    target.jqplot(dataPlot, {
        title: chartTitle,
        animate: true,
        axesDefaults: {
            labelRenderer: $.jqplot.CanvasAxisLabelRenderer
        },
        seriesDefaults: {
            showMarker: true
        },
        legend: {
            show: true,
            renderer: $.jqplot.EnhancedLegendRenderer,
            placement: "outsideGrid",
            labels: label,
            location: "ne",
            rowSpacing: "5px",
            rendererOptions: {
                // set to true to replot when toggling series on/off
                // set to an options object to pass in replot options.
                seriesToggle: 'normal',
                seriesToggleReplot: {resetAxes: true}
            }
        },
        axes: {
            xaxis: {
                label: 'Date',
                ticks: ticks,          
                tickInterval: 20,
                tickOptions: {
                    showGridline: false,
                    angle: -60,
                    fontFamily: 'Helvetica',
                    fontSize: '8pt'
                },                
            }
        },
        grid: {
            drawBorder: false,
            shadow: false,
            // background: 'rgba(0,0,0,0)'  works to make transparent.
            background: "white"
        },
        series: [
            {
                pointLabels: {
                    show: showPointLabel
                },
                rendererOptions: {
                    // speed up the animation a little bit.
                    // This is a number of milliseconds.
                    // Default for a line series is 2500.
                    animation: {
                        speed: 2000
                    },
                    smooth: true
                }
            }
        ]
    });

    target.bind('jqplotDataMouseOver', function(ev, seriesIndex, pointIndex, data) {
        var idx = seriesIndex;
        $('tr.jqplot-table-legend').removeClass('legend-row-highlighted');  
        $('tr.jqplot-table-legend').children('.jqplot-table-legend-label').removeClass('legend-text-highlighted');
        $('tr.jqplot-table-legend').eq(idx).addClass('legend-row-highlighted');
        var dateFull = chartJsonData.dateFull;
        $(this).find(".jqplot-title").html(dateFull[data[0] - 1][1] + " - " + data[1]);
        $('tr.jqplot-table-legend').eq(idx).children('.jqplot-table-legend-label').addClass('legend-text-highlighted'); 
    });

    target.bind('jqplotDataUnhighlight', function(ev, seriesIndex, pointIndex, data) {
        $('tr.jqplot-table-legend').removeClass('legend-row-highlighted');  
        $('tr.jqplot-table-legend').children('.jqplot-table-legend-label').removeClass('legend-text-highlighted');
        $(this).find(".jqplot-title").html(chartTitle);        
    });
}
</script>
</body>
</html>

Answer 1

您需要在 target.jqplot(dataPlot, {...}) 调用中使用此代码启用荧光笔...

    highlighter: {
        show: true,
        sizeAdjust: 7.5
    },

使用此 CSS 设置工具提示的样式 ;)

.jqplot-highlighter-tooltip {
    background: #fff;
    box-shadow: 0 0 3px 1px rgba(0,0,0,0.5);
    padding: 2px 3px;
}

希望对您有所帮助 ;)

Answer 2

我以前遇到过这个问题，但我的 X 轴值是数字，并通过从最大值增加大约 20% 的比率（调整）来修复它，以获得更多 space，这就成功了我在这里建议您在 X 值（X 刻度）中再添加一个值，而 Y 值（刻度）中没有相关值，以扩展（添加更多 space）X 轴（如果您对 Y 轴有相同的问题使用相同的技术）看看Here on Plunker

<input id="dashboardForm:j_idt49:4:hiddenChartData" type="text" name="dashboardForm:j_idt49:4:hiddenChartData" value="{&quot;data&quot;:[[843,1312,745,683,832,829,772,740,792,672,550,323]],&quot;dateFull&quot;:[[1,&quot;01/06&quot;],[2,&quot;02/06&quot;],[3,&quot;03/06&quot;],[4,&quot;04/06&quot;],[5,&quot;05/06&quot;],[6,&quot;06/06&quot;],[7,&quot;07/06&quot;],[8,&quot;08/06&quot;],[9,&quot;09/06&quot;],[10,&quot;10/06&quot;],[11,&quot;11/06&quot;],[12,&quot;12/06&quot;],[13,&quot;13/06&quot;]],&quot;tick&quot;:[[1,&quot;01/06&quot;],[2,&quot;02/06&quot;],[3,&quot;03/06&quot;],[4,&quot;04/06&quot;],[5,&quot;05/06&quot;],[6,&quot;06/06&quot;],[7,&quot;07/06&quot;],[8,&quot;08/06&quot;],[9,&quot;09/06&quot;],[10,&quot;10/06&quot;],[11,&quot;11/06&quot;],[12,&quot;12/06&quot;]**,[13,&quot;13/06&quot;]**]}" class="soluongdonhangngay170" style="display:none;">

希望对您有所帮助。

Answer 3

我遇到了类似的问题，即数据标签未显示在我的趋势边缘。

一种解决方案是将 jqplot.pointLabels.js 文件中的 edgeTolerance 从默认值 (-10) 增加到所需值：

   $.jqplot.PointLabels = function(options) {

      ...

    // prop: edgeTolerance
    // Number of pixels that the label must be away from an axis
    // boundary in order to be drawn.  Negative values will allow overlap
    // with the grid boundaries.
    this.edgeTolerance = -1000;
   
      ...
    
    $.extend(true, this, options);
};

jqplot 不显示标签端点

jqplot not show label end points

javascript

jquery

jqplot