Neptune's Potato Monsters

    bizcharts-plugin-slider

    3.0.1 • Public • Published

    NPM Package NPM Downloads

    bizcharts-plugin-slider

    A datazoom slider plugin for BizCharts base g2-plugin-slider.

    Installation

    Please make sure BizCharts has been already loaded.

    npm

    $ npm install bizcharts-plugin-slider

    html

    <script src=https://unpkg.com/bizcharts-plugin-slider@2.0.0/umd/bizcharts-plugin-slider.js"> </script>

    dev build

    $ git clone https://github.com/alibaba/BizCharts.git
    cd BizCharts
    cd /plugin/slider
    $ npm install
    $ npm run build

    dev demo

    slider $ sudo vi /etc/hosts
    // add 127.0.0.1 localhost
    slider $ npm run demo
    // open in browser http://localhost:3510/

    Usage

    see demo

    API Reference

    Create an instance

    <Slider
      width={{number} | {string}}
      height={number}
      padding={{object} | {number} | {array}}
      xAxis={string}
      yAxis={string}
      start={{string} | {number}}
      end={{string} | {number}}
      data={{array} | {dataview}}
      fillerStyle={object}
      backgroundStyle={object}
      textStyle={object}
      handleStyle={object}
      backgroundChart={object}
    />

    Property

    1、 width number | string

    Set the width of the slider component, the default is auto, indicating the width of the adaptive container.

    2、 height number

    Set the height of the slider component, the default is 26, the unit is 'px'.

    3、 padding

    Sets the padding canvas's canvas's padding to align with the chart (the default chart's canvas container is padded with padding). The default is the same padding as BizCharts default theme, [20, 20, 95, 80].

    4、 xAxis string

    Must declare Slider is a slider component with a background graph that is used to declare the horizontal axis mapping field of the background chart, which is also the data filtering field.

    5、 yAxis string

    Must declare Slider is a slider component with a background graph that is used to declare the vertical axis of the background graph.

    6、 data array | dataview

    Must declare,data source.

    7、 start number | string

    The value of the slider that declares the position of the slider at the beginning of the corresponding data value, the default is the minimum value.

    8、 end number | string

    The data value corresponding to the position where the slider finishes the slider is declared, and the default is the maximum value.

    9、 scales object

    Used to define the columns for the xAxis and yAxis fields for the same column definitions in the action's chart.

    Sample code:

    <Slider 
        scales={{
          [`${xAxis}`]: {
            type: 'time',
            mask: 'MM-DD'
          }
        }}
    />

    10、 fillerStyle object

    The selected area of the style configuration, the default configuration is as follows:

    <Slider 
      fillerStyle={{
        fill: '#BDCCED',
        fillOpacity: 0.3
      }}
    />

    Red box in the picture selected area:

    11、 backgroundStyle object

    slider background style.

    12、 textStyle object

    slider auxiliary text font style configuration.

    13、 handleStyle object

    The slider style configuration, configurable properties are as follows:

      <Slider 
      handleStyle={{
        img: 'https://gw.alipayobjects.com/zos/rmsportal/QXtfhORGlDuRvLXFzpsQ.png', // Can make the picture address can also be data urls
        width: 5,
        height: 26
      }}
    />

    14、 backgroundChart object

    The slider's background chart configuration allows you to configure its chart type and color:

    <Slider 
      backgroundChart={{
      type: [ 'area' ], // The type of chart, either a string or an array
      color: '#CCD6EC'
      }}
    />

    15、 onChange function

    When the slider slider changes, trigger the callback function, mainly used to update the state of ds. The callback function provides a parameter, which is an object that contains the following properties:

    <Slider 
    onChange = {(obj) => {
      const { startValue, endValue, startText, endText } = obj;
    }}
    />
    • startValue The current raw data value corresponding to the start slider, if the type istime or timeCat, the value is timestamp, please note.
    • endValue The current corresponding raw data value of the end slider, if the type istime or timeCat, the value is timestamp, please note.
    • startText Start slider current display text value
    • endText The current display text value of the end slider

    NOTE: The reason for distinguishing text from value is that users will format numbers in most cases. Therefore, when setting the state quantity and updating the state quantity, you need to ensure that the value types are the same before and after.

    Install

    npm i bizcharts-plugin-slider

    DownloadsWeekly Downloads

    9,696

    Version

    3.0.1

    License

    MIT

    Unpacked Size

    315 kB

    Total Files

    18

    Last publish

    Collaborators

    • leannechen
    • weepy3641