Módulo:Chart data/doc

De RuneScape Wiki
Ir para: navegação, pesquisa

Esta é a página de documentação para Módulo:Chart data

Ícone informação.svg
Isto é uma subpágina de documentação para Módulo:Chart data.
Contém informações de uso, categorias e outros conteúdos que não fazem parte do módulo original
Módulo:Chart data's a função main é invocada por Predefinição:Chart data.
Módulo:Chart data requer Module:Enum.
Módulo:Chart data requer Module:LibraryUtil.
Módulo:Chart data requer Module:Paramtest.
Módulo:Chart data requer Module:Rgba.
Módulo:Chart data é solicitado por Módulo:Drop rate calculator.

Helps create the json to generate charts using Chart.js v3 through MediaWiki:Gadget-Charts-core.js.

Este módulo é um módulo de apoio para ser usado por outros módulos; ele pode não ser projetado para ser invocado diretamente. See RuneScape:Lua/Helper modules for a full list and more information.

MóduloFunçãoTipoUsoExample
Chart data_main( args )table/chartTurns a table/chart object into a json string.
convertToXYFormat( ys, [xs|{}] )table, tableConverts the ys array into an array of {x = n, y = y[n]} tables. If xs is already partially filled it will use {x = x[n], y = y[n]} until all values in xs are used, then it will use {x = n, y = y[n]} again for the remaining values in ys.
generateXYFromFunc( func, start_x, end_x, [step|1] )function, number, number, numberReturns an arry of {x = n, y = fun(n)} tables where n ranges from start_x to end_x in step increments. Be careful when using decimal step values as floating point error can cause the generator to stop one element too soon.
jagexInterpolation( low_chance, high_chance, start_level, end_level )number, number, number, number
newChart( [options] )tableReturns a new chart object. options is a table with options in the Chart.js format. Most options will be set automatically or will be set later with other functions if not already defined. Usually all you need to define here is the chart type e.g. newChart{ type = 'scatter' }. Check the modules documentation for more info.
chart:addDataSets( ... )table/dataSet objectAppends all given data sets to the chart.data.datasets table.
chart:addDataLabels( labels )tableAppends all items in labels to the chart.data.labels table.
chart:setDimensions( width, [height|width], [minWidth|400], [minHeight|400], [resizable|true] )number/string, number/string, number/string, number/string, booleanSets the dimensions of the chart. If a number is given to width, height, minWidth and minHeight it will be assumed you meant pixels. You can also use strings like 100% to fill the available space, 60vw/60vh to dynamically scale the simensions to the viewport size (i.e. 60vw = 60% of browser's window width). If resizable is true, the chart can be dragged by the lower right corner to change its size. If this function is not called the default values are width = 60vw, height = 60vh, minWidth = 400px, minHeight = 400px and resizable = true.
chart:setTitle( [text|nil], [position|'top'] )string, stringSets the label title of the chart. A value of nil will remove the current title.
chart:setXLabel( [label|nil] )stringSets the label for the x axis. Only works on chart types 'line', 'bar', 'bubble' and 'scatter'. If used without arguments it will remove the current label.
chart:setYLabel( [label|nil] )stringSets the label for the y axis. Only works on chart types 'line', 'bar', 'bubble' and 'scatter'. If used without arguments it will remove the current label.
chart:setXLimits( [min|nil], [max|nil], [step|nil] )number, number, numberSets the start, stop and step size of the x axis. Any argument with a value of nil will remove that setting. Only works on chart types 'bubble' and 'scatter'.
chart:setYLimits( [min|nil], [max|nil], [step|nil] )number, number, numberSets the start, stop and step size of the y axis. Any argument with a value of nil will remove that setting. Only works on chart types 'line', 'bar', 'bubble' and 'scatter'.
chart:setRadialLimits( [min|nil], [max|nil], [step|nil] )number, number, numberSets the start, stop and step size of the r axis on polar plots. Any argument with a value of nil will remove that setting. Only works on chart types 'radar' and 'polarArea'.
chart:setXAxisType( [type|nil] )stringSets the axis type. Supported values are 'linear', 'logarithmic', 'category' and 'time'. If called without arguments it will reset back to the default value 'linear'. Only works on chart types 'bar', 'bubble', 'line' and 'scatter'.
chart:setYAxisType( [type|nil] )stringSame as chart:setXAxisType() but for the y axis. Only works on chart types 'bar', 'bubble', 'line' and 'scatter'.
chart:showLegend( val )booleanHides the legend if val is false.
chart:setOptions( options )tableSets options using Chart.js format but makes sure you only change the given settings and not accidentally delete already existing settings. i.e. using chart:setOptions{ scales = {x = {max = 100}} } while {scales = {x = {min = 0}}} already exists will result in {scales = {x = {min = 0, max = 100}}}.
chart:flipXY()N/ATurn the bar chart into a horizontal one. Only has an effect on bar charts.
chart:debug()N/APretty prints the internal structure since you can't use mw.logObject to do so.
chart:newDataSet( [options] )tableReturns a new dataSet object which is also automatically added to the chart datasets table.
dataSet:addData( data )tableAppends the values of data to the already existing data stored in the dataSet.data array. Using dataset.data = data will overwrite any stored data.
dataSet:addDataPoint( data )number/tableAppend a single value to the dataSet.data array. Same as table.insert( dataSet.data, data ).
dataSet:setOptions( options )tableSets options using Chart.js format.
dataSet:done()N/AReturns the parent chart object again.

Usage

To create a chart we need to create JSON in a format described by chart.js. To make this a bit easier we can write a lua table instead which is then converted to a JSON using chart._main(). An example of this is Module:Chart data/xp chart, which can then be displayed on a page using {{Chart data|Chart data/xp chart|height=40vh|width=40vw}} resulting in:

{"type":"scatter","data":{"datasets":[{"data":[{"y":0,"x":1},{"y":83,"x":2},{"y":174,"x":3},{"y":276,"x":4},{"y":388,"x":5},{"y":512,"x":6},{"y":650,"x":7},{"y":801,"x":8},{"y":969,"x":9},{"y":1154,"x":10},{"y":1358,"x":11},{"y":1584,"x":12},{"y":1833,"x":13},{"y":2107,"x":14},{"y":2411,"x":15},{"y":2746,"x":16},{"y":3115,"x":17},{"y":3523,"x":18},{"y":3973,"x":19},{"y":4470,"x":20},{"y":5018,"x":21},{"y":5624,"x":22},{"y":6291,"x":23},{"y":7028,"x":24},{"y":7842,"x":25},{"y":8740,"x":26},{"y":9730,"x":27},{"y":10824,"x":28},{"y":12031,"x":29},{"y":13363,"x":30},{"y":14833,"x":31},{"y":16456,"x":32},{"y":18247,"x":33},{"y":20224,"x":34},{"y":22406,"x":35},{"y":24815,"x":36},{"y":27473,"x":37},{"y":30408,"x":38},{"y":33648,"x":39},{"y":37224,"x":40},{"y":41171,"x":41},{"y":45529,"x":42},{"y":50339,"x":43},{"y":55649,"x":44},{"y":61512,"x":45},{"y":67983,"x":46},{"y":75127,"x":47},{"y":83014,"x":48},{"y":91721,"x":49},{"y":101333,"x":50},{"y":111945,"x":51},{"y":123660,"x":52},{"y":136594,"x":53},{"y":150872,"x":54},{"y":166636,"x":55},{"y":184040,"x":56},{"y":203254,"x":57},{"y":224466,"x":58},{"y":247886,"x":59},{"y":273742,"x":60},{"y":302288,"x":61},{"y":333804,"x":62},{"y":368599,"x":63},{"y":407015,"x":64},{"y":449428,"x":65},{"y":496254,"x":66},{"y":547953,"x":67},{"y":605032,"x":68},{"y":668051,"x":69},{"y":737627,"x":70},{"y":814445,"x":71},{"y":899257,"x":72},{"y":992895,"x":73},{"y":1096278,"x":74},{"y":1210421,"x":75},{"y":1336443,"x":76},{"y":1475581,"x":77},{"y":1629200,"x":78},{"y":1798808,"x":79},{"y":1986068,"x":80},{"y":2192818,"x":81},{"y":2421087,"x":82},{"y":2673114,"x":83},{"y":2951373,"x":84},{"y":3258594,"x":85},{"y":3597792,"x":86},{"y":3972294,"x":87},{"y":4385776,"x":88},{"y":4842295,"x":89},{"y":5346332,"x":90},{"y":5902831,"x":91},{"y":6517253,"x":92},{"y":7195629,"x":93},{"y":7944614,"x":94},{"y":8771558,"x":95},{"y":9684577,"x":96},{"y":10692629,"x":97},{"y":11805606,"x":98},{"y":13034431,"x":99},{"y":14391160,"x":100},{"y":15889109,"x":101},{"y":17542976,"x":102},{"y":19368992,"x":103},{"y":21385073,"x":104},{"y":23611006,"x":105},{"y":26068632,"x":106},{"y":28782069,"x":107},{"y":31777943,"x":108},{"y":35085654,"x":109},{"y":38737661,"x":110},{"y":42769801,"x":111},{"y":47221641,"x":112},{"y":52136869,"x":113},{"y":57563718,"x":114},{"y":63555443,"x":115},{"y":70170840,"x":116},{"y":77474828,"x":117},{"y":85539082,"x":118},{"y":94442737,"x":119},{"y":104273167,"x":120},{"y":115126838,"x":121},{"y":127110260,"x":122},{"y":140341028,"x":123},{"y":154948977,"x":124},{"y":171077457,"x":125},{"y":188884740,"x":126}],"label":"Standard skill","borderColor":"rgba(166,206,227,1)","showLine":true,"backgroundColor":"rgba(166,206,227,0.2)","fill":false},{"data":[{"y":0,"x":1},{"y":830,"x":2},{"y":1861,"x":3},{"y":2902,"x":4},{"y":3980,"x":5},{"y":5126,"x":6},{"y":6390,"x":7},{"y":7787,"x":8},{"y":9400,"x":9},{"y":11275,"x":10},{"y":13605,"x":11},{"y":16372,"x":12},{"y":19656,"x":13},{"y":23546,"x":14},{"y":28138,"x":15},{"y":33520,"x":16},{"y":39809,"x":17},{"y":47109,"x":18},{"y":55535,"x":19},{"y":64802,"x":20},{"y":77190,"x":21},{"y":90811,"x":22},{"y":106221,"x":23},{"y":123573,"x":24},{"y":143025,"x":25},{"y":164742,"x":26},{"y":188893,"x":27},{"y":215651,"x":28},{"y":245196,"x":29},{"y":277713,"x":30},{"y":316311,"x":31},{"y":358547,"x":32},{"y":404634,"x":33},{"y":454796,"x":34},{"y":509259,"x":35},{"y":568254,"x":36},{"y":632019,"x":37},{"y":700797,"x":38},{"y":774834,"x":39},{"y":854383,"x":40},{"y":946227,"x":41},{"y":1044569,"x":42},{"y":1149696,"x":43},{"y":1261903,"x":44},{"y":1381488,"x":45},{"y":1508756,"x":46},{"y":1644015,"x":47},{"y":1787581,"x":48},{"y":1939773,"x":49},{"y":2100917,"x":50},{"y":2283490,"x":51},{"y":2476369,"x":52},{"y":2679907,"x":53},{"y":2894505,"x":54},{"y":3120508,"x":55},{"y":3358307,"x":56},{"y":3608290,"x":57},{"y":3870846,"x":58},{"y":4146374,"x":59},{"y":4435275,"x":60},{"y":4758122,"x":61},{"y":5096111,"x":62},{"y":5449685,"x":63},{"y":5819299,"x":64},{"y":6205407,"x":65},{"y":6608473,"x":66},{"y":7028964,"x":67},{"y":7467354,"x":68},{"y":7924122,"x":69},{"y":8399751,"x":70},{"y":8925664,"x":71},{"y":9472665,"x":72},{"y":10041285,"x":73},{"y":10632061,"x":74},{"y":11245538,"x":75},{"y":11882262,"x":76},{"y":12542789,"x":77},{"y":13227679,"x":78},{"y":13937496,"x":79},{"y":14672812,"x":80},{"y":15478994,"x":81},{"y":16313404,"x":82},{"y":17176661,"x":83},{"y":18069395,"x":84},{"y":18992239,"x":85},{"y":19945833,"x":86},{"y":20930821,"x":87},{"y":21947856,"x":88},{"y":22997593,"x":89},{"y":24080695,"x":90},{"y":25259906,"x":91},{"y":26475754,"x":92},{"y":27728955,"x":93},{"y":29020233,"x":94},{"y":30350318,"x":95},{"y":31719944,"x":96},{"y":33129852,"x":97},{"y":34580790,"x":98},{"y":36073511,"x":99},{"y":37608773,"x":100},{"y":39270442,"x":101},{"y":40978509,"x":102},{"y":42733789,"x":103},{"y":44537107,"x":104},{"y":46389292,"x":105},{"y":48291180,"x":106},{"y":50243611,"x":107},{"y":52247435,"x":108},{"y":54303504,"x":109},{"y":56412678,"x":110},{"y":58575823,"x":111},{"y":60793812,"x":112},{"y":63067521,"x":113},{"y":65397835,"x":114},{"y":67785643,"x":115},{"y":70231841,"x":116},{"y":72737330,"x":117},{"y":75303019,"x":118},{"y":77929820,"x":119},{"y":80618654,"x":120},{"y":83370445,"x":121},{"y":86186124,"x":122},{"y":89066630,"x":123},{"y":92012904,"x":124},{"y":95025896,"x":125},{"y":98106559,"x":126},{"y":101255855,"x":127},{"y":104474750,"x":128},{"y":107764216,"x":129},{"y":111125230,"x":130},{"y":114558777,"x":131},{"y":118065845,"x":132},{"y":121647430,"x":133},{"y":125304532,"x":134},{"y":129038159,"x":135},{"y":132849323,"x":136},{"y":136739041,"x":137},{"y":140708338,"x":138},{"y":144758242,"x":139},{"y":148889790,"x":140},{"y":153104021,"x":141},{"y":157401983,"x":142},{"y":161784728,"x":143},{"y":166253312,"x":144},{"y":170808801,"x":145},{"y":175452262,"x":146},{"y":180184770,"x":147},{"y":185007406,"x":148},{"y":189921255,"x":149},{"y":194927409,"x":150}],"pointStyle":"crossRot","pointRadius":6,"label":"Elite skill","borderColor":"rgba(31,120,180,1)","showLine":true,"backgroundColor":"rgba(31,120,180,0.2)","fill":false}]},"options":{"maintainAspectRatio":false,"scales":{"y":{"scaleLabel":{"display":true,"labelString":"Experience"}},"x":{"scaleLabel":{"display":true,"labelString":"Level"}}},"tooltips":{"mode":"x","intersect":false,"position":"nearest"}}}

To make the construction of this table a bit easier, the chart class is provided which internally has the extact same structure as if we manually created the table. The chart class just sets a bunch of default settings based on what chart type you are creating; it also makes it a lot easier to deal with the colors of your data and provides a bunch of functions to easily set axis labels, axis start and stop values, axis type, etc.

Create new chart object

local chart = require( 'Module:Chart data' )

local plot = chart.newChart{ type = 'scatter' } -- If no type is given it will default to 'scatter'
plot.fill = true -- Show background, exact behaviour depends on chart type

-- The above two lines are equivalent to
local plot = chart.newChart{ type = 'scatter', fill = true }

Chaining functions

local plot = chart.newChart()
    :setDimensions( '40vh', '50vw', '400px', '400px', true )
    :setTitle( 'My title' )
    
-- Or
local plot = chart.newChart()
plot:setDimensions( '40vh', '50vw', '400px', '400px', true )
plot:setTitle( 'My title' )

Datasets

local plot = chart.newChart()

local dataSet = plot:newDataSet() -- This data set is already added to plot so you don't need to use plot:addDataSets( dataSet )
dataSet.data = chart.generateXYFromFunc( ... )
dataSet:addDataPoint( { x=5, y=10} ) -- Append another data point to the already existing data
dataSet:setOptions{ fill = true }

-- Or
plot:newDataSet{ data = chart.generateXYFromFunc( ... ), fill = true }
    :addDataPoint( { x=5, y=10 } )

You can also add datasets that you created somewhere else. The downside is that you then can't use addData/addDataPoint/setOptions functions on that set.

local set = chart.generateXYFromFunc( ... )

plot:addDataSets( set )

Datasets can also chain functions

local plot = chart.newChart()
    :newDataSet{ data = myDataSet }
        :addDataPoint( { x=5, y=10 } )
    :done()
    :newDataSet{ data = anotherDataSet }:done()

Color pallets

chart.colorPallets has a few pre-defined color pallets. These pallets are made up of Module:Rgba objects. They also have a metatable set which allows them to automatically use the next color pallet in case the current pallet has less colors than your number of datasets.

You can set your prefered pallet for your chart with myChart.colorPallet = chart.collorPallets.blue, in case of chart type bar of horizontalbar your can also set it per data set myDataSet.colorPallet = chart.collorPallets.orange or if you want all bars of a given set to be the same color myDataSet.color = chart.collorpallets.orange[3].

It is possible to define your own color pallet as an array of Module:Rgba objects.

The chart class has the following color opions:

  • backgroundAlpha - sets the rgba:fade() value for background colors.
  • hoverLightenValue - sets the rgba:lighten() value for when you hover over a data point.
  • hoverAlpha - sets the rgba:fade() value for when you hover over a data point.
  • hoverSaturateValue - sets the rgba:saturate() value for when you hover over a data point.

Their default value depend on the cart type but you can manually set them using:

chart:setOptions{
    backgroundAlpha = <number>,
    hoverLightenValue = <number>,
    hoverAlpha = <number>,
    hoverSaturateValue = <number>
}

Erro em Lua em package.lua na linha 80: module 'Module:Chart data/doc examples' not found.

Code

{{Chart data|Chart data/doc examples|colorQualitative}} Erro de script: Nenhum módulo desse tipo "Chart data/doc examples".

Erro em Lua em package.lua na linha 80: module 'Module:Chart data/doc examples' not found.

Code

{{Chart data|Chart data/doc examples|colorBlue}} Erro de script: Nenhum módulo desse tipo "Chart data/doc examples".

Erro em Lua em package.lua na linha 80: module 'Module:Chart data/doc examples' not found.

Code

{{Chart data|Chart data/doc examples|colorGreen}} Erro de script: Nenhum módulo desse tipo "Chart data/doc examples".

Erro em Lua em package.lua na linha 80: module 'Module:Chart data/doc examples' not found.

Code

{{Chart data|Chart data/doc examples|colorBlueGreen}} Erro de script: Nenhum módulo desse tipo "Chart data/doc examples".

Erro em Lua em package.lua na linha 80: module 'Module:Chart data/doc examples' not found.

Code

{{Chart data|Chart data/doc examples|colorOrange}} Erro de script: Nenhum módulo desse tipo "Chart data/doc examples".

Erro em Lua em package.lua na linha 80: module 'Module:Chart data/doc examples' not found.

Code

{{Chart data|Chart data/doc examples|colorOverflow}} Erro de script: Nenhum módulo desse tipo "Chart data/doc examples".

Erro em Lua em package.lua na linha 80: module 'Module:Chart data/doc examples' not found.

Code

{{Chart data|Chart data/doc examples|customColorPallet}} Erro de script: Nenhum módulo desse tipo "Chart data/doc examples".

Erro em Lua em package.lua na linha 80: module 'Module:Chart data/doc examples' not found.

Code

{{Chart data|Chart data/doc examples|colorOptions}} Erro de script: Nenhum módulo desse tipo "Chart data/doc examples".

Examples

Erro de script: Nenhum módulo desse tipo "Chart data/doc examples".

Code

{{#Invoke:Chart data/doc examples|line}} Erro de script: Nenhum módulo desse tipo "Chart data/doc examples".

Erro em Lua em package.lua na linha 80: module 'Module:Chart data/doc examples' not found.

Code

{{Chart data|Chart data/doc examples|bar}} Erro de script: Nenhum módulo desse tipo "Chart data/doc examples".

Erro em Lua em package.lua na linha 80: module 'Module:Chart data/doc examples' not found.

Code

{{Chart data|Chart data/doc examples|horizontalBar}} Erro de script: Nenhum módulo desse tipo "Chart data/doc examples".

Erro em Lua em package.lua na linha 80: module 'Module:Chart data/doc examples' not found.

Code

{{Chart data|Chart data/doc examples|radar}} Erro de script: Nenhum módulo desse tipo "Chart data/doc examples".

Erro em Lua em package.lua na linha 80: module 'Module:Chart data/doc examples' not found.

Code

{{Chart data|Chart data/doc examples|pie}} Erro de script: Nenhum módulo desse tipo "Chart data/doc examples".

Erro em Lua em package.lua na linha 80: module 'Module:Chart data/doc examples' not found.

Code

{{Chart data|Chart data/doc examples|doughnut}} Erro de script: Nenhum módulo desse tipo "Chart data/doc examples".

Erro em Lua em package.lua na linha 80: module 'Module:Chart data/doc examples' not found.

Code

{{Chart data|Chart data/doc examples|polarArea}} Erro de script: Nenhum módulo desse tipo "Chart data/doc examples".

Erro em Lua em package.lua na linha 80: module 'Module:Chart data/doc examples' not found.

Code

{{Chart data|Chart data/doc examples|bubble}} Erro de script: Nenhum módulo desse tipo "Chart data/doc examples".

Erro em Lua em package.lua na linha 80: module 'Module:Chart data/doc examples' not found.

Code

{{Chart data|Chart data/doc examples|scatter}} Erro de script: Nenhum módulo desse tipo "Chart data/doc examples".