2015-11-06 2 views
2

Я пытаюсь составить калибровочную диаграмму с jqPlot и иметь некоторые проблемы с форматированием ярлыков меток. Можно ли переопределить метки?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> 

current meter output

Благодаря Стив

ответ

1

Попробуйте использовать простой CSS:

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

Эй вы можете указать мне страницу документации, где я могу найти все эти классы css. –

+0

У меня нет документа. Я просто попробую и с Google Chrome Inspect. Я посмотрел класс/ID элемента. –

+0

ОК. Огромное спасибо. –

0

Даже если этот вопрос немного старый, он показал мне путь к решению numberMinorTicks. Это numberMinorTicks не изменяемый rendererOptions массив или что-то, как он получает вычисляться внутри плагин/jqplot.meterGaugeRenderer.js

Моего решения изменить файл и сделать эту работу, как пары другим «проходимым» Params, а также. Проверьте код для 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 
     } 
    } 
}); 

Я не отправлял никаких линий и четкие инструкции кодирования как плагин выглядит иначе для каждой доступной версии.

Смежные вопросы