jqPlot - 样式自定义功能(即刻度:CustomTicks)

时间:2013-06-14 02:27:28

标签: javascript jquery jqplot data-visualization

我有一对jqPlot条形图,我正在使用与正在绘制的数据不同的数组设置刻度,如下图所示。我注意到,当使用这样的一些额外功能时,使用这些图表元素来更加困难或者至少与Doc不同。例如,我需要自定义工具提示以使其呈现我必须实现一个名为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

1 个答案:

答案 0 :(得分:0)

这是问题,因为我错过了对jqplot.canvasTextRenderer.js的引用。导致异常被抛出:

this._textRenderer = new $.jqplot.CanvasFontRenderer(ropts); 
                     Uncaught TypeError: undefined is not a function 

<强>答案:

 <script language="javascript" type="text/javascript" src="JS/jqplot/plugins/jqplot.canvasTextRenderer.js"></script>