【发布时间】：2017-06-08 07:43:31
【问题描述】：
当我使用 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>
【问题讨论】：
-
你能做一个小提琴或codepen吗？
-
@shramee：我似乎无法让它在 jsfiddle 上工作（因为我的资源不是 https）。但是，我编辑了我的帖子，将代码放在了独立的形式中。您可以将其复制到
a.html，然后运行它。谢谢
标签： javascript jquery jqplot