jqPlot 仪表标签格式答案

【问题标题】：jqPlot meter gauge label formattingjqPlot 仪表标签格式
【发布时间】：2015-11-06 12:23:48
【问题描述】：

我正在尝试使用 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>

谢谢史蒂夫

【问题讨论】：

标签： jquery charts salesforce jqplot gauge

【解决方案1】：

尝试使用简单的 CSS：

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

【讨论】：

嘿，请您指向我可以找到所有这些 css 类的文档页面。
我没有任何文档。我只是尝试使用 Google Chrome Inspect 查看元素的类/ID。
好的。非常感谢。

【解决方案2】：

即使这个问题有点老了，它也向我展示了解决 numberMinorTicks 的方法。这个 numberMinorTicks 不能被 rendererOptions 数组或其他东西改变，因为它是在 plugins/jqplot.meterGaugeRenderer.js 中计算出来的

我的解决方案是更改文件并使该参数也像其他“可通过”参数一样工作。检查代码 this.numberMinorTicks = getnmt(this.tickPositions, this.tickInterval, this.tickFactor); 并用类似的东西替换它

this.numberMinorTicks = (this.numberMinorTicks) ? this.numberMinorTicks : getnmt(this.tickPositions, this.tickInterval, this.tickFactor);

这样，当什么都没有传递时它仍然可以工作，以及当你传递一些东西时。通过像

var plot0 = $.jqplot(passed_php_arrChartIDs, passed_value_arr, {
    seriesDefaults: {
        renderer: $.jqplot.MeterGaugeRenderer,
        rendererOptions: {
            numberMinorTicks:4
        }
    }
});

我没有发布任何行和明确的编码说明，因为每个可用版本的插件看起来都不同。

【讨论】：