Highcharts Error #19的解决方法

本文详细解析了在Web端使用Highcharts绘制线性图时遇到的HighchartsError#19问题,即‘Too many ticks’错误。该错误发生于尝试在一个轴上应用过多的刻度时。文章提供了导致此问题的代码片段,并给出了修正方法,通过调整tick间隔来避免刻度过密,确保图表能够正常绘制。

在web端使用highcharts绘线性图的时候,遇到了Highcharts Error #19

到网站上一搜索,

Highcharts Error #19

Too many ticks

This error happens when you try to apply too many ticks to an axis, specifically when you add more ticks than the axis pixel length. In practice, it doesn't make sense to add ticks so densely that they can't be distinguished from each other. One cause of the error may be that you set a tickInterval that is too small for the data value range. In general, tickPixelInterval is a better option, as it will handle this automatically. Another case is if you try to set categories on a datetime axis, which will result in Highcharts trying to add one tick on every millisecond since 1970.

总体意思就是说,分割太细,导致无法绘图。

原来出错的代码是这样的

rel.tick = parseInt((rel.max - rel.min) / 6);

如此代码,导致你的数据里面如果出现了小数,而且整数部分一致的话,tick就会为0,导致分割单位为0,将产生无效分割数。

故修改成

//rel.tick = parseInt((rel.max - rel.min) / 6);
rel.tick = parseFloat(((rel.max - rel.min) / 6).toFixed(2));
就可以完美解决问题了。

改为查询用ajax更新数据和图表 要不修改我的样式!, <ui:define name="content"> <p:outputPanel id="contentPanel" autoUpdate="true"> <div class="ui-fluid"> <div id="contentId"> <div style="display: flex; justify-content: flex-start; align-items: flex-start;"> <!-- 左侧查询条件区域 --> <div style="margin-right: 20px;"> <p:panel> <div class="ui-inputgroup" style="display:inline-block;"> <span class="ui-inputgroup-addon" style="width:55px">组织</span> <p:selectOneMenu id="org" value="#{zhuanXuReportBean.org}" style="width:80px"> <f:selectItem itemLabel="河源" itemValue="河源"/> <f:selectItem itemLabel="杭州" itemValue="杭州"/> </p:selectOneMenu> </div> <p:spacer width="10px"/> <div class="ui-inputgroup" style="display:inline-block;"> <span class="ui-inputgroup-addon" style="width:55px;">类型</span> <p:selectOneMenu id="eventType" value="#{zhuanXuReportBean.eventType}" style="width:110px;" panelStyle="width:180px;"> <f:selectItem itemLabel="转序" itemValue="转序"/> <f:selectItems value="#{zhuanXuReportBean.typeList}"/> </p:selectOneMenu> </div> <p:spacer width="10px"/> <div class="ui-inputgroup" style="display:inline-block;"> <span class="ui-inputgroup-addon" style="width:55px">厂房</span> <p:selectOneMenu id="selectFactory" value="#{zhuanXuReportBean.selectFactory}" style="width:80px"> <f:selectItem itemLabel="选择厂房"/> <f:selectItem itemLabel="1#厂" itemValue="1#厂"/> <f:selectItem itemLabel="5#厂" itemValue="5#厂"/> <f:selectItem itemLabel="6#厂" itemValue="6#厂"/> <f:selectItem itemLabel="7#厂" itemValue="7#厂"/> <f:selectItem itemLabel="8#厂" itemValue="8#厂"/> <f:selectItem itemLabel="12#厂" itemValue="12#厂"/> <f:selectItem itemLabel="20#厂" itemValue="20#厂"/> </p:selectOneMenu> </div> <p:spacer width="5px" height="10px"/> <div class="ui-inputgroup" style="display:inline-block;"> <span class="ui-inputgroup-addon">统计始 </span> <p:calendar id="startDate" pattern="yyyy-MM-dd" value="#{zhuanXuReportBean.startDate}" inputStyle="width:90px"></p:calendar> </div> <p:spacer width="5px" height="10px"/> <div class="ui-inputgroup" style="display:inline-block;"> <span class="ui-inputgroup-addon">统计止 </span> <p:calendar id="endDate" pattern="yyyy-MM-dd" value="#{zhuanXuReportBean.endDate}" inputStyle="width:90px"></p:calendar> </div> <p:spacer width="5px" height="10px"/> <h:commandButton id="searchBtn" class="searchBtn" actionListener="#{zhuanXuReportBean.doSearch}" oncomplete="updateChart()" icon="fa fa-search" value="查询" update="dataTableId" style="width:80px;height:33px;background-color:#007ad9;border: 1px solid #007ad9;color: #ffffff;"/> </p:panel> </div> </div> </div> </div> </p:outputPanel> <p:dialog header="明细 #{zhuanXuReportBean.detailNameNo}" widgetVar="zhuanXuDetail" id="zhuanXuDetail" modal="true" resizable="true" width="780px" height="auto" contentHeight="flex" closeOnEscape="true" styleClass="detail-style"> <!-- 数据表格优化 --> <p:dataTable id="dataTableId2" value="#{zhuanXuReportBean.lazyEventDataDetailList}" lazy="true" paginator="true" rows="20" paginatorPosition="bottom" var="zhuanXuBean" emptyMessage="没有找到相关记录" styleClass="data-table fixed-layout-table" style="max-height: 900px; overflow-y: auto;" tableStyle="table-layout: fixed; width: 100%" rowIndexVar="rowIndex" rowsPerPageTemplate="20,30,50" paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}" > <!-- 列宽优化 - 使用百分比宽度 --> <p:column headerText="厂房" style="text-align:center; width:8px;"> <h:outputText value="#{zhuanXuBean.factoryName}" styleClass="ellipsis-text"/> </p:column> <p:column headerText="单号" style="text-align:center; width:20px;"> <h:outputText value="#{zhuanXuBean.orderNo}" styleClass="ellipsis-text"/> </p:column> <p:column headerText="板件" style="text-align:center; width:2px;"> <h:outputText value="#{zhuanXuBean.plateNo}"> </h:outputText> </p:column> <p:column headerText="下机时间" style="text-align:center; width:15px;"> <h:outputText value="#{zhuanXuBean.confirmTime}"> <f:convertDateTime pattern="M月d HH:mm" timeZone="GMT+8"/> </h:outputText> </p:column> <p:column headerText="转序时间" style="text-align:center; width:15px;"> <h:outputText value="#{zhuanXuBean.transferTime}"> <f:convertDateTime pattern="M月d HH:mm" timeZone="GMT+8"/> </h:outputText> </p:column> <p:column headerText="状态" style="text-align:center; width:2px;"> <h:outputText value="#{zhuanXuBean.status}"> </h:outputText> </p:column> <p:column headerText="等待转序" style="text-align:center; width:20px;"> <h:outputText value="#{zhuanXuBean.transferDurationMinutes}" styleClass="ellipsis-text"/> </p:column> </p:dataTable> </p:dialog> <div style="display: flex; align-items: flex-start;"> <div id="chartData" class="chartData" style="height:400px;width: 50%;"> <h:outputScript> document.addEventListener(&#39;DOMContentLoaded&#39;, function () { var chart1; var categories = #{zhuanXuReportBean.categoriesStr}; var salesData = #{zhuanXuReportBean.salesDataStr}; var eventType = &#39;#{zhuanXuReportBean.eventType!=""?zhuanXuReportBean.eventType:"转序效率"}&#39;; chart1 = new Highcharts.Chart({ chart: { renderTo: &#39;chartData&#39;, type: &#39;column&#39; }, title: { text: eventType + &#39;分析(件数)&#39;, x: -20 //center }, xAxis: { categories: eval(categories) }, yAxis: { title: { text: eventType + &#39;分析(件数)&#39;, }, min: 0, plotLines: [{ value: 0, width: 1, color: &#39;#808080&#39; }] }, tooltip: { crosshairs: true, valueSuffix: &#39;&#39;, shared: true }, plotOptions: { column: { pointPadding: 0.2, borderWidth: 0 } }, series: eval(salesData) }); // 更新图表数据 function updateChart() { var newCategories = #{engWojiaBean.categoriesStr}; var salesData = #{engWojiaBean.salesDataStr}; chart1.xAxis[0].setCategories(newCategories); chart1.series[0].setData(salesData); var series = chart1.series; series[1].hide(); series[2].hide(); series[5].hide(); } }); </h:outputScript> </div> <!-- 右侧表格区域 --> <div style="width: 27%;margin-left: 20px; margin-top: 0;"> <p:dataTable id="dataTableId" widgetVar="dataTableId" emptyMessage="没有找到相关记录" value="#{zhuanXuReportBean.lazyEventDataList}" var="zx" styleClass="data-table fixed-layout-table" style="width:100%;" paginator="true" rows="10" paginatorPosition="bottom" rowsPerPageTemplate="10,20,30" lazy="true" paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"> <p:columnGroup type="header"> <!-- 第一行表头 --> <p:row> <!-- 姓名列,跨两行 --> <p:column rowspan="2" headerText="操作员" style="text-align:center;width:30px"/> <!-- 时间跨度列,跨两行 --> <p:column rowspan="2" headerText="时间跨度" style="text-align:center;width:25px"/> <!-- 转序数量列,跨两列(即合并后面的两个列),只占一行 --> <p:column colspan="2" headerText="转序数量" style="text-align:center; width:20px;"/> <!-- 操作列,跨两行 --> <p:column rowspan="2" headerText="操作" style="text-align:center;width:10px"/> </p:row> <!-- 第二行表头:只需要显示转序数量下面的两个子列 --> <p:row> <!-- 正常列 --> <p:column headerText="正常" style="text-align:center; width:10px;"/> <!-- 超时列 --> <p:column headerText="超时" style="text-align:center; width:10px;"/> </p:row> </p:columnGroup> <!-- 数据列部分:注意顺序必须与表头中列的顺序一致,且数量对应 --> <!-- 姓名工号列 --> <p:column style="text-align:center;width:30px"> <h:outputText value="#{zx.name}" styleClass="ellipsis-text"/> </p:column> <!-- 时间跨度列 --> <p:column style="text-align:center;width:30px"> <h:outputText value="#{zhuanXuReportBean.searchDate}" styleClass="ellipsis-text"/> </p:column> <!-- 正常列(属于转序数量下) --> <p:column style="text-align:center; width:10px;"> <h:outputText value="#{zx.normalCount}" styleClass="ellipsis-text"/> </p:column> <!-- 超时列(属于转序数量下) --> <p:column style="text-align:center; width:10px;"> <h:outputText value="#{zx.timeOutCount}" styleClass="ellipsis-text"/> </p:column> <!-- 操作列 --> <p:column style="text-align:center;width:10px"> <p:commandLink value="查看明细" actionListener="#{zhuanXuReportBean.openEventDataDialog(zx)}" oncomplete="PF(&#39;zhuanXuDetail&#39;).show();" update="@(.detail-style)" styleClass="centered-link"/> </p:column> </p:dataTable> </div> </div> </ui:define>
08-26
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值