Question

我正在尝试使用jqPlot创建一个仪表图表，并且在格式化刻度标签时遇到一些问题。是否可以覆盖标签？

我希望标签前面加上一个货币符号，并且要添加数千个分隔逗号，虽然我发现了一些与其他图表类型一起使用的示例，但它们对仪表类型没有任何影响。有谁知道怎么做？

是否也可以使仪表显示更小的刻度？当我设置自己的刻度位置时，它会显示较少的小刻度。

我从服务器端获取值，这是Salesforce所以如果有什么看起来有点不寻常，比如使用{获取值！格式化，就是这样。

<apex:page showHeader="true" sidebar="true" controller="TargetsDashCtrl">
    <!--[if lt IE 9]><apex:includeScript value="{!URLFOR($Resource.jqPlot, '/dist/excanvas.js')}"  /><![endif]-->
    <apex:includeScript value="{!URLFOR($Resource.jqPlot, '/dist/jquery.min.js')}"  />
    <apex:includeScript value="{!URLFOR($Resource.jqPlot, '/dist/jquery.jqplot.min.js')}"  />
    <apex:includeScript value="{!URLFOR($Resource.jqPlot, '/dist/plugins/jqplot.meterGaugeRenderer.js')}"  />
    <apex:stylesheet value="{!URLFOR($Resource.jqPlot, '/dist/jquery.jqplot.css')}"  />

    <style>
        .jqplot-title{
            font-size:16px;
        }

        .jqplot-meterGauge-tick, .jqplot-meterGauge-label {
            color: #999;
            font-size: 14px;
        }

    </style>

    <div id="chartdiv" style="height:300px;width:500px; "></div>

    <script>
        $j = jQuery.noConflict();
        $j(document).ready(function(){

            plot = $j.jqplot('chartdiv',[[{!data.actual}]],{
                title: '{!data.title}',
                seriesDefaults: {
                    renderer: $j.jqplot.MeterGaugeRenderer,
                    rendererOptions: {
                        min: 0,
                        max: {!data.target},
                        label: '{!data.actual} - values in \'000 USD',
                        labelPosition: 'bottom',
                        labelHeightAdjust: -5,
                        ticks: [0, {!data.x25pct},{!data.x75pct},{!data.target}],
                        intervals:[{!data.x25pct},{!data.x75pct},{!data.target}],
                        intervalColors:['#C25454', '#C2C254', '#54C254'],
                        ringColor: '#363636',
                        tickColor: '#363636',
                        ringWidth: 6
                    }
                }
            });
        });
    </script>

</apex:page>

由于史蒂夫

Answer 1

尝试使用简单的CSS：

<style type="text/css">
  .jqplot-meterGauge-label {
     color: #000000;
     margin-top: 5px;
  }
</style>

jqPlot仪表标签格式

1 个答案: