jqPlot 棒グラフ用にいくつかあり、以下に示すように、プロットされているデータとは異なる配列で目盛りを設定しています。このようないくつかの追加機能を使用すると、グラフのこれらの要素のスタイルを設定することがより困難になるか、少なくともドキュメントとは異なることに気付きました。たとえば、ツール ヒントをカスタマイズする必要があるため、ツール ヒントをレンダリングするには、文書化されていない というプロパティを実装する必要がありましたtooltipContentEditor
。この場合、目盛りラベルは 5pt フォントで、サイズを大きくする必要があります。したがって、これらのコンポーネントが「カスタマイズ」されたら、これらのコンポーネントをスタイリングする適切な方法を探しています。
$(document).ready(function () {
$.jqplot.config.enablePlugins = true;
var s1 = Data;//[[10,1],[15,2],[13,3]] Plot Data is [seriesArry][0] & series is [Series][1]
var Ticks = [[0,'a'],[1,'b'],[2,'c']];//Custom ticks.
plot1 = $.jqplot('Chart1', [s1], {
// Only animate if we're not using excanvas (not in IE 7 or IE 8)..
animate: !$.jqplot.use_excanvas,
title: 'Chart1',
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
pointLabels: { show: true, location: 'e', edgeTolerance: -15 },//Point labels aren't rendering. Not sure why
rendererOptions: {
barDirection: 'horizontal',
barWidth: 15,
color: 'rgb(230,230,245)',
},
},
axesDefaults: {},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
pointLabels: { show: true },
},
yaxis: {
ticks: Ticks,//Custom ticks. [[0,'a'],[1,'b'],[2,'c']]
tickOptions: { fontSize: '15pt'; },
}//end yaxis
},
highlighter: {
show: true,
tooltipContentEditor: tooltipContentEditor,//Function to customize content of tooltip
sizeAdjust: 15,
},
grid: {
background: 'rgb(72, 102, 137)',
},
});
});//End Document.Ready