javascript - jqplot 不显示标签端点-6ren

javascript - jqplot 不显示标签端点

转载作者：行者123 更新时间：2023-11-30 15:16:14

当我使用 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>

最佳答案

我以前遇到过这个问题，但我的 X 轴值是数字，并通过从最大值添加大约 20% 的比率(调整)来修复它，以获得更多空间，这就成功了在这里，我建议您再添加一个X 值(X 刻度)中的值在 Y 值(刻度)中没有相关值以扩展(添加更多空间)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;">

希望这对您有所帮助。

关于javascript - jqplot 不显示标签端点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44429606/

文章推荐： c# - 如何使用 WPF 将十进制值作为命令参数传递给命令？

文章推荐： python - SWIG(C 和 Python)cstring.i 问题

文章推荐： C - 初始化结构中的指针

文章推荐： c# - 另一个游戏对象背后的粒子系统渲染

java - Spring boot 2 - Actuator 端点，where is/beans 端点
在 spring boot 2 应用程序中，我正在尝试访问执行器端点/beans，就像我之前在 Spring boot 1.5.* 应用程序中所做的那样。但我做不到。此外，我没有在 log.INFO
java - 在 REST API 中创建 PUT 和 POST 端点，而不创建 GET 端点？
我正在为资源 items 编写端点，它是 applications 的子资源，如下所示:applications/{:id}/items。项目和应用程序都具有除名称之外的其他属性。我创造了 GET
具有不同权限的 RESTful 端点
我正在创建一个 API，其中基于经过身份验证的用户可以更改对象的不同属性的权限。解决这个问题的常用方法是什么？我应该有这样的端点吗 /admin/users 和 /users 具有不同的 API
具有非根路径的 gRPC 端点
也许(希望如此)我错过了一些非常简单的东西，但我似乎无法弄清楚。我有一组我想放在 nghttpx 代理后面的 gRPC 服务。为此，我需要能够使用非根 url 上的 channel 配置我的客户端。
用于银行卡法币存款的币安 api 端点？
我没有找到法定存款的历史记录(来自银行卡)，这里只有加密存款:https://prnt.sc/ttdwc2= ) 例如，在我的银行帐户界面中，我在 5 月 12 日找到了存款，但在这里找不到...
所有可用指标的 Prometheus 端点
我很好奇普罗米修斯的工作原理。使用 Prometheus 界面，我可以看到一个下拉列表，我认为其中包含所有可用的指标。但是，我无法访问列出所有抓取的指标的指标端点。 http://targethost
用于文件下载的 GraphQL 端点
是否可以从 apollo-server-express 上的 GraphQL 端点触发浏览器中的文件下载？应用？我有一个用标准 express 写的端点 app.get函数(见下文)，但我想利用 G
用于所有媒体上传的 Strapi 端点
有谁知道在一个请求中获取您上传到媒体库的所有图像的端点吗？我将 next js 与 Strapi 一起使用，需要一种方法来从媒体库中获取所有图像，但似乎没有任何相关文档最佳答案 /api/上传 GE
具有优先级的 WCF 端点
关闭。这个问题需要更多focused .它目前不接受答案。想改进这个问题吗？更新问题，使其只关注一个问题 editing this post . 关闭 6 年前。 Improve this qu
python - Heroku 端点
我编写了一个简单的 HTTP 监听器并将其部署在 Heroku 应用程序中。我确保在 $PORT 中绑定(bind)端口。现在，我尝试使用 url name-of-my-app.herokuapp.
android - 验证消息来自特定的应用程序/端点
我正在尝试构建一个安全系统，用于将数据从客户端 Android 应用程序传输到运行 PHP 的网络服务器。我想做的是确保系统是加密安全的，这样来自应用程序的消息可以被验证为实际上来自应用程序本身，而
gousb - 不是 OUT 端点
我是 Go 编程语言的新手。尝试使用 gousb访问爱普生收据打印机。因此，我从存储库中获取了一些示例代码，并对其进行了一些调整，以验证我是否可以访问打印机。我可以看到打印机并枚举端点。我收到此输
ios - 我们如何模拟 azure 端点？
我正在使用 azure API 端点。 ....azure-api.net/...。当我尝试使用 Charles 代理查看 HTTP 请求/响应时，HTTP 响应为空。当我关闭代理时，该请求有效。我
azure - 在元数据文档中找不到 WsTrust 端点
我正在关注这个tutorial了解用户成功登录后如何获取 token 。到目前为止我已完成的步骤: 我已使用此 URL 注册了自己(用户名和密码):https://MyCompany.b2clogi
soap - 如何连接到 SVC 端点？
给定一个以 .svc 结尾且应该运行 SOAP 网络服务的 URL，我如何从中获取一些数据？我试过: 通过网络浏览器访问它通过 Python 的库 Zeep 访问它通过 Microsoft 实用
rest - 有没有办法保护公共(public)端点？
我认为公共(public) REST API(例如注册端点)无法验证用户身份是否正确？例如，我们的端点应该只接受来 self 们的移动应用程序和 future 网络应用程序的请求。我很确定这在逻辑上
.net - 如何硬编码服务的默认 WCF 端点？
在自托管服务中，我想使用 App.config 中指定的端点(如果存在)，或者如果 App.config 为空则使用代码中指定的默认端点。我该怎么做？编辑:澄清一下，这是在服务器(服务)端使用 Se
android - 如何配置实时开发人员通知以使用我的后端(https 端点)？
我需要在我的后端服务器中实现实时开发者通知，以了解我的用户所做的任何购买修改(暂停帐户、续订订阅等)。我的后端服务器是用 Delphi 制作的，没有现成的 Delphi 库，但是，我可以制作一个 HT
kubernetes - 如何连接到 Kubernetes 端点？
我创建了一个 Kubernetes 服务: [root@Infra-1 kubernetes]# kubectl describe service gitlab Name: git
具有大量输入数据的 REST 端点 (GET)
我正在开发一个应用程序，我需要将对象列表传递给 REST 端点，该端点将进行一些计算并将结果返回给调用者。问题更多是关于如何处理这种情况的哲学问题？在 GET 请求中传递大量有效负载是一个坏主意。

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - jqplot 不显示标签端点