Módulo:Chart data/doc
Esta é a página de documentação para Módulo:Chart data
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ódulo | Função | Tipo | Uso | Example |
---|---|---|---|---|
Chart data | _main( args ) | table/chart | Turns a table/chart object into a json string. | |
convertToXYFormat( ys, [xs|{}] ) | table, table | Converts 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, number | Returns 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] ) | table | Returns 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 object | Appends all given data sets to the chart.data.datasets table. | ||
chart:addDataLabels( labels ) | table | Appends 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, boolean | Sets 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, string | Sets the label title of the chart. A value of nil will remove the current title. | ||
chart:setXLabel( [label|nil] ) | string | Sets 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] ) | string | Sets 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, number | Sets 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, number | Sets 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, number | Sets 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] ) | string | Sets 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] ) | string | Same as chart:setXAxisType() but for the y axis. Only works on chart types 'bar', 'bubble', 'line' and 'scatter'. | ||
chart:showLegend( val ) | boolean | Hides the legend if val is false. | ||
chart:setOptions( options ) | table | Sets 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/A | Turn the bar chart into a horizontal one. Only has an effect on bar charts. | ||
chart:debug() | N/A | Pretty prints the internal structure since you can't use mw.logObject to do so. | ||
chart:newDataSet( [options] ) | table | Returns a new dataSet object which is also automatically added to the chart datasets table. | ||
dataSet:addData( data ) | table | Appends 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/table | Append a single value to the dataSet.data array. Same as table.insert( dataSet.data, data ) . | ||
dataSet:setOptions( options ) | table | Sets options using Chart.js format. | ||
dataSet:done() | N/A | Returns the parent chart object again. |
Índice
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 thergba:fade()
value for background colors.hoverLightenValue
- sets thergba:lighten()
value for when you hover over a data point.hoverAlpha
- sets thergba:fade()
value for when you hover over a data point.hoverSaturateValue
- sets thergba: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 |
|
Erro em Lua em package.lua na linha 80: module 'Module:Chart data/doc examples' not found.
Code |
|
Erro em Lua em package.lua na linha 80: module 'Module:Chart data/doc examples' not found.
Code |
|
Erro em Lua em package.lua na linha 80: module 'Module:Chart data/doc examples' not found.
Code |
|
Erro em Lua em package.lua na linha 80: module 'Module:Chart data/doc examples' not found.
Code |
|
Erro em Lua em package.lua na linha 80: module 'Module:Chart data/doc examples' not found.
Code |
|
Erro em Lua em package.lua na linha 80: module 'Module:Chart data/doc examples' not found.
Code |
|
Erro em Lua em package.lua na linha 80: module 'Module:Chart data/doc examples' not found.
Code |
|
Examples
Erro de script: Nenhum módulo desse tipo "Chart data/doc examples".
Code |
|
Erro em Lua em package.lua na linha 80: module 'Module:Chart data/doc examples' not found.
Code |
|
Erro em Lua em package.lua na linha 80: module 'Module:Chart data/doc examples' not found.
Code |
|
Erro em Lua em package.lua na linha 80: module 'Module:Chart data/doc examples' not found.
Code |
|
Erro em Lua em package.lua na linha 80: module 'Module:Chart data/doc examples' not found.
Code |
|
Erro em Lua em package.lua na linha 80: module 'Module:Chart data/doc examples' not found.
Code |
|
Erro em Lua em package.lua na linha 80: module 'Module:Chart data/doc examples' not found.
Code |
|
Erro em Lua em package.lua na linha 80: module 'Module:Chart data/doc examples' not found.
Code |
|
Erro em Lua em package.lua na linha 80: module 'Module:Chart data/doc examples' not found.
Code |
|