2016-09-02 61 views
0

是否有可能低於採取此代碼,讓這個很容易重複使用而無需我想創建一個新的選擇每次複製和粘貼:如果我想有另一個圖表將對象文字轉換爲可重用類?

optionA: { 
    chart: { 
    type: 'stacked', 
    color: 'red', 
    showControls: false 
    } 
} 

現在,我現在必須這樣做的權利:

optionB: { 
    chart: { 
    type: 'line', 
    color: 'yellow', 
    showControls: false 
    } 
} 

這將是很好,如果有將創建一個類或者各種各樣的東西,這樣我可以,而不必再使用所有相同的添加新選項的方式代碼,就像隱藏了一些不需要知道實現的東西。我曾四處尋找方法來做到這一點,但我的搜索沒有成功。

編輯:到目前爲止,我可能沒有足夠的信息看完回覆。以下是完整的數據:

timelineA: { 
    chart: { 
     type: 'stackedAreaChart', 
     color: defaultColor, 
     showControls: false, 
     showLegend: false, 
     useInteractiveGuideline: true, 
     margin: margin, 

     x: AnalysisTransforms.xValue, 
     y: function(d){ 
      return d[1]; 
     }, 

     forceY: [0, 1], 

     noData: $scope.translations.noData, 
     xAxis: { 
      showMaxMin: false, 
      tickPadding: 16, 
      tickFormat: AnalysisTransforms.formatDate, 
      tickValues: AnalysisTransforms.xAxisTicks 
     }, 
     yAxis: { 
      tickPadding: 16, 
      tickFormat: AnalysisTransforms.formatInteger 
     } 
    } 
} 

timelineB: { 
    chart: { 
     type: 'line', 
     color: defaultColor, 
     showControls: false, 
     showLegend: false, 
     useInteractiveGuideline: true, 
     margin: margin, 

     x: AnalysisTransforms.formatLine, 
     y: AnalysisTransforms.linex, 

     noData: $scope.translations.noData, 
     xAxis: { 
      showMaxMin: false, 
      tickPadding: 16, 
      tickFormat: AnalysisTransforms.formatParseDate, 
      tickValues: AnalysisTransforms.xticks 
     }, 
     yAxis: { 
      tickPadding: 16, 
      tickFormat: AnalysisTransforms.formatInteger 
     } 
    } 
} 

這是來自angular-nvd3,並沒有足夠的支持來回購我想象出來。我已經開始創建一個類,但不認爲我遵循最佳實踐,因爲我不知道如何將這樣的對象字面值轉換爲我可以創建的任何圖表的新類。

我看到的是,有一些代碼是用於2之間,然後是一些不是。我希望除了在這個問題上提供幫助之外,我不會感到困惑。

+1

你看過構造函數嗎? –

+0

我有,我只是不明白這將從對象文字轉換爲構造函數的正確方法 – pertrai1

+0

使用**函數**。 –

回答

1

東西爲:

var defaults = { 
    color: defaultColor, 
    showControls: false, 
    showLegend: false, 
    useInteractiveGuideline: true, 
}; 

function buildChart(type, opts) { 
    return Object.assign({ 
    type: type, 
    }, 
    defaults, 
    opts); 
} 

// Then you can do variations as 
var lineChart = buildChart('line', { color: '#CCC' }); 
var barChart = buildChart('bar', { color: 'red' }); 

Object.assignopts去年去的,所以它可以覆蓋defaults時,這一點很重要需要。

+1

謝謝你讓我走向正確的方向。 – pertrai1

0
function getObj(opts) { 
    return { 
     type: opts.type, 
     colour: opts.colour, 
     showControls: opts.showControls 
    } 
    } 

    var b = getObj({type: 'sometype'}) 

你可以在如果你想添加一些默認值,但上面的應該工作

+0

如上所述雖然構造函數可以工作,但可能會因此而過度使用 – jiveturkey

+0

我已經更新了這些問題,希望它能提供更多信息來幫助解決問題。 – pertrai1

0

是的,你可以很容易地創建對象......如果你最近瀏覽器中運行有一個更好的辦法做到這一點。但是這僅僅是一個樣品,開始你

var Option = (function() 
{ 
    var Class = function (Type, Color) 
    { 
     this.chart = { 
     type: Type, 
     color: Color, 
     showControls: false 
     }; 
}; 

    (Class.prototype); 
    return Class; 
})(); 

var optionA = new Option('stacked', 'red'); 
var optionB = new Option('line', 'yellow'); 

這裏Fiddle