自定义主题图表 [英] Customize primefaces chart

问题描述

我在我的项目中使用了primfaces的图表。

我知道jQuery的图表使用jqplot。

如何使用示例代码自定义主题图表？

自定义jqplot图的示例代码如下：

  $（document）.ready（function（）{
 $ .jqplot._noToImageButton = true; 
 var plot1 = $ .jqplot（chart1，[prevYear，currYear]，{
 seriesColors：[rgba（78，135，194，0.7） rgb（211，235，59）]，
 title：'Monthly TurnKey Revenue'，
 highlighter：{
 show：true，
 sizeAdjust：1，
 tooltipOffset：9 
}，
 grid：{
 background：'rgba（57,57,57,0.0）'，
 drawBorder：false，
 shadow： false，
 gridLineColor：'＃666666'，
 gridLineWidth：2 
}，
 legend：{
 show：true，
 placement：'outside' 
}，
 seriesDefaults：{
 rendererOptions：{
 smooth：true，
 animation：{
 show：true 
} 
}，
 showMarker：false 
}，
系列：[
 {
 fill：true，
 label：'2010'
} ，
 {
 label：'2011'
} 
]，
 axesDefaults：{
 rendererOptions：{
 baselineWidth：1.5，
 baselineColor：'＃444444'，
 drawBaseline：false 
} 
}，
 axes：{
 xaxis：{
 renderer：$ .jqplot .DateAxisRenderer，
 tickRenderer：$ .jqplot.CanvasAxisTickRenderer，
 tickOptions：{
 formatString：％b％e，
 angle：-30，
 textColor： '#dddddd'
}，
 min：2011-08-01，
 max：2011-09-30，
 tickInterval：7 days，
 drawMajorGridlines：false 
}，
 yaxis：{
 renderer：$ .jqplot.LogAxisRenderer，
 pad：0，
 rendererOptions：{
 minorTicks：1 
}，
 tickOptions：{
 formatString：$％d，
 showMark：false 
} 
} 
 } 
}）; 
 
 $（'。jqplot-highlighter-tooltip'）。addClass（'ui-corner-all'）
}）; 
  

示例链接 1

如何在表格图表上使用上述代码？

这里是一个例子

 < p：lineChart ... extender =chartExtender/> 
  

并在js文件或标签下的页面中：

  function chartExtender（）{
 // this = chart widget instance 
 // this.cfg = options 
 this.cfg.grid = {
 background：'transparent'，
 gridLineColor：'＃303030'，
 drawBorder：false，
}; 
} 
  

这只是一个例子..这将帮助你做休息。

希望有助于：）

I using of primefaces's chart on my project.

I know be primefaces's chart use of jqplot .

on jqplot's site exist example of customizing jqplot chart.

how to use of example codes for customizing primefaces chart ?

sample code for customizing jqplot chart is following :

$(document).ready(function () {
$.jqplot._noToImageButton = true;
var plot1 = $.jqplot("chart1", [prevYear, currYear], {
    seriesColors: ["rgba(78, 135, 194, 0.7)", "rgb(211, 235, 59)"],
    title: 'Monthly TurnKey Revenue',
    highlighter: {
        show: true,
        sizeAdjust: 1,
        tooltipOffset: 9
    },
    grid: {
        background: 'rgba(57,57,57,0.0)',
        drawBorder: false,
        shadow: false,
        gridLineColor: '#666666',
        gridLineWidth: 2
    },
    legend: {
        show: true,
        placement: 'outside'
    },
    seriesDefaults: {
        rendererOptions: {
            smooth: true,
            animation: {
                show: true
            }
        },
        showMarker: false
    },
    series: [
        {
            fill: true,
            label: '2010'
        },
        {
            label: '2011'
        }
    ],
    axesDefaults: {
        rendererOptions: {
            baselineWidth: 1.5,
            baselineColor: '#444444',
            drawBaseline: false
        }
    },
    axes: {
        xaxis: {
            renderer: $.jqplot.DateAxisRenderer,
            tickRenderer: $.jqplot.CanvasAxisTickRenderer,
            tickOptions: {
                formatString: "%b %e",
                angle: -30,
                textColor: '#dddddd'
            },
            min: "2011-08-01",
            max: "2011-09-30",
            tickInterval: "7 days",
            drawMajorGridlines: false
        },
        yaxis: {
            renderer: $.jqplot.LogAxisRenderer,
            pad: 0,
            rendererOptions: {
                minorTicks: 1
            },
            tickOptions: {
                formatString: "$%'d",
                showMark: false
            }
        }
    }
});

  $('.jqplot-highlighter-tooltip').addClass('ui-corner-all')
});

example link 1

how to use of above code on primefaces chart ?

解决方案

When you use extender you can change everything by js.

Here is an example

<p:lineChart ... extender="chartExtender"/>

And on js file or in the page under Tag:

function chartExtender() {        
 // this = chart widget instance        
 // this.cfg = options        
 this.cfg.grid = {             
        background: 'transparent',
         gridLineColor: '#303030',
         drawBorder: false,
    };
  }

This is just an example.. This will help you to do the rest.

Hope that helps :)

这篇关于自定义主题图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！