jqplot不显示标签端点
当我使用jqplot绘制图表时，图表的两个终点都没有显示标签，我不知道为什么。请帮忙
这是我的代码（自包含代码，加载了所有资源）
<html>
<head>
</head>
<body>
<input id="dashboardForm:j_idt49:4:hiddenChartData" type="text" name="dashboardForm:j_idt49:4:hiddenChartData" value="{"data":[[843,1312,745,683,832,829,772,740,792,672,550,323]],"dateFull":[[1,"01/06"],[2,"02/06"],[3,"03/06"],[4,"04/06"],[5,"05/06"],[6,"06/06"],[7,"07/06"],[8,"08/06"],[9,"09/06"],[10,"10/06"],[11,"11/06"],[12,"12/06"]],"tick":[[1,"01/06"],[2,"02/06"],[3,"03/06"],[4,"04/06"],[5,"05/06"],[6,"06/06"],[7,"07/06"],[8,"08/06"],[9,"09/06"],[10,"10/06"],[11,"11/06"],[12,"12/06"]]}" 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>
3 个答案:
答案 0 :(得分：2)
之前我有这个问题但是我的X轴值是数字并通过从最大值添加比率（调整）约20％来修复它以获得更多空间并且这样做了我在这里建议你再添加一个X值（X刻度）中的值没有Y值中的相关值（刻度）以扩展（添加更多空间）X轴（如果你有相同的问题，Y轴使用相同的技术）看看{{ 3}}
<input id="dashboardForm:j_idt49:4:hiddenChartData" type="text" name="dashboardForm:j_idt49:4:hiddenChartData" value="{"data":[[843,1312,745,683,832,829,772,740,792,672,550,323]],"dateFull":[[1,"01/06"],[2,"02/06"],[3,"03/06"],[4,"04/06"],[5,"05/06"],[6,"06/06"],[7,"07/06"],[8,"08/06"],[9,"09/06"],[10,"10/06"],[11,"11/06"],[12,"12/06"],[13,"13/06"]],"tick":[[1,"01/06"],[2,"02/06"],[3,"03/06"],[4,"04/06"],[5,"05/06"],[6,"06/06"],[7,"07/06"],[8,"08/06"],[9,"09/06"],[10,"10/06"],[11,"11/06"],[12,"12/06"]**,[13,"13/06"]**]}" class="soluongdonhangngay170" style="display:none;">
希望得到这个帮助。
答案 1 :(得分：0)
您需要在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;
}
希望有所帮助;）
答案 2 :(得分：0)
我遇到了类似的问题，数据标签没有显示在我的趋势边缘。
一种解决方案是将 jqplot.pointLabels.js 文件中的 edgeTolerance 从默认值 (-10) 增加到所需值：
client.on('message', message => {
const enm = require("emoji-name-map");
const one = enm.get('one');
const two = enm.get('two');
let e1 = [];
let e2 = [];
e1 = message.content.match(/:.+?:/g);
console.log(e1);
if (e1) {
e1.forEach( e => {
e2.push( {name: e.match(/[a-zA-Z0-9_]+/g).toString(), id: null, unicode: null} );
})
}
console.log(e2);
if (e2) {
e2.forEach( e => {
try {
e.id = client.emojis.cache.find(emoji => emoji.name === e.name);
} catch (err) {
console.log(err);
};
try {
e.unicode = enm.get(e.name);
} catch (err) {
console.log(err);
}
})
}
console.log(e2);
if (e2) {
let i = 0;
e2.forEach( e => {
if (typeof e.id != 'undefined') {
message.react(e.id);
} else if (typeof e.unicode != 'undefined' ) {
message.react(e.unicode);
} else { message.react( i === 0 ? one : two ) };
i++;
})
}
});
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？