ZingChart-реагирует с модулем выбора инструмента - PullRequest
Новая
       16

ZingChart-реагирует с модулем выбора инструмента

1 голос
/ 16 февраля 2020

Я могу отобразить диаграмму ZingChart внутри React Component, но не знаю, как это сделать с помощью модуля инструмента выделения.

Документация на веб-сайте ZingChart (https://www.zingchart.com/docs/tutorials/features/selection) не упоминается, как это сделать из компонента React.

Мой уровень знаний в области разработки React, ZingChart и внешнего интерфейса очень ограничен.

Спасибо

1 Ответ

0 голосов
/ 28 февраля 2020

Итак, вам нужно получить содержимое конфигурации и изменить его для конфигурации нужного модуля. Если вы получили компонент из раздела использования на странице gingub zingchart-Reaction, ваш компонент должен выглядеть следующим образом: 

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      config: {
        type: 'bar',
        series: [{
          values: [4,5,3,4,5,3,5,4,11]
        }]
      }
    }
  }
  render() {
    return (
      <div >
        <ZingChart data={this.state.config}/>
      </div>
    );
  }

}

Если вы посмотрите в секцию JavaScript нужного вам модуля, вы найдете это: 

var myConfig = {
"graphset":[
    {
        "background-color":"#ffffff",
        "type":"bar",
        "title": {
          "text": "Multiple Selections"
        },
        "subtitle": {
          "text":". Click To Clear Selection"
        },
        "legend":{
            "toggle-action":"remove",
            "align":"center",
            "adjust-layout":false,
            "borderWidth":0,
            "verticalAlign":"bottom",
            "fontColor":"#7d7d7d",
            "font-size":10,
            "marginRight":20,
            "marginBottom":0,
            "marginTop":0,
            "marker":{
                "type":"square"
            },
        },
        "preview":{
            "background-color":"#F5F7F3",
            "border-width":0,
            "height":29,
            "preserve-zoom":false,
            "mask":{
                "backgroundColor":"white",
                "alpha":0.8
            },
            "handle":{
                "border-width":1
            },
            "y":"85%"
        },
        "scale-x":{
            "zooming":true,
            "zoom-to":[0,30],
            "item":{
                "font-size":10,
                "font-color":"#7d7d7d"
            },
            "tick":{
                "visible":false
            },
            "title":{
                "text":"You can Make Multiple Selections And Click To Clear selection"
            },
            "minValue":1484782109655,
            "step":"day",
            "transform":{
                "type":"date"
            }
        },
        "scale-y":{
            "zooming":false,
            "values":"0:2.503:0.5006",
            "guide":{
                "line-style":"dotted"
            },
            "item":{
                "font-size":10,
                "font-color":"#7d7d7d"
            },
            "tick":{
                "visible":false
            },
            "format":"%v%",
            "decimals":1
        },
        "zoom":{
            "active":false,
            "preserve-zoom":true
        },
        "plotarea":{
            "margin-top":"20",
            "margin-left":"20",
            "margin":"dynamic 50 105 dynamic"
        },
        "plot":{
            "data-append-selection":true,
            "mode":"normal",
            "line-width":1,
            "line-color":"#4d9900",
            "background-color":"#1e88e5",
            "marker":{
                "size":3,
                "background-color":"#ccccff #6666ff",
                "border-width":1,
                "border-color":"#4d9900"
            },
            "tooltip":{
                "visible":true,
                "text":"%kv<br>%vv"
            },
            "selection-mode":"multiple",
            "selected-state":{
                "background-color":"#ffa726",
                "border-width":0
            }
        },
        "series":[
            {
                "values":[0.8840000000000001,1.9060000000000001,1.35,1.189,0.984,0.619,0.468,0.28700000000000003,2.503,1.139,2.011,1.7389999999999999,0.5559999999999999,0.22899999999999998,0.218,0.761,0.58,1.171,0.8240000000000001,0.721,0.542,0.954,0.683,0.976,1.0290000000000001,0.28800000000000003,0.362,0.388,1.057,0.886,0.196,0.333,1.013,0.541,0.127,0.726,0.649,1.031,0.606,1.232,0.5459999999999999,0.8340000000000001,1.9869999999999999,0.257,0.62,0.571,0.194,0.315,0.45799999999999996,0.14300000000000002,0.126,0.252,0.588,1.419,0.259,0.724,0.295,0.344,0.455,0.27699999999999997,0.604,0.471,0.8200000000000001,0.504,0.209,0.33999999999999997,0.404,0.127,0.293,0.326,0.428,0.38999999999999996,0.562,0.14300000000000002,0.258,0.414,0.42100000000000004,0.6669999999999999,0.8290000000000001,1.369,0.261,1.15,0.644,0.519,0.44400000000000006,0.627,0.411,0.447,0.173,0.763,0.581,1.2710000000000001,0.9129999999999999,0.988,0.51,0.664,0.348,0.5559999999999999,0.28600000000000003,0.424,0.676,0.367,0.634,0.47600000000000003,0.512,0.33999999999999997,0.076,0.27799999999999997,0.291,0.402,0.199,0.21,0.261,0.178,0.315,0.6459999999999999,0.482,0.08499999999999999,0.068,0.40099999999999997,0.135,0.679,0.769,1.113,0.315,0.37,0.267,0.145,1.2309999999999999,0.126,0.217,1.0670000000000002,2.213,0.687,0.63,0.498,0.428,0.154,0.27299999999999996,0.161,0.28900000000000003,0.8130000000000001,0.406,0.553,0.584,0.73,0.347,0.194,0.439,0.28800000000000003,0.561,0.22499999999999998,1.2550000000000001,0.771,0.13,0.644,0.078,0.27899999999999997,0.35100000000000003,0.525,0.735,0.893,0.719,1.375,0.42500000000000004,0.27999999999999997,0.255,0.109,0.411,0.11,0.172,0.698],
                "text":"Percentage Of Sales"
            }
        ]
    }
]
};
 
zingchart.bind('myChart', 'click', function(e) {
    if (e.target === "none") {
        zingchart.exec('myChart', 'clearselection');
    }
});
          
 
// Load the selection-tool and render the chart once its loaded
zingchart.loadModules('selection-tool', function() {
  zingchart.render({ 
  	id : 'myChart', 
  	data : myConfig, 
  	height: '100%', 
  	width: '100%',
  	modules:'selection-tool'
  });
});

Теперь вам просто нужно получить конфигурацию и поместить в ваш компонент, например: 

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      config : {
        "graphset":[
            {
                "background-color":"#ffffff",
                "type":"bar",
                "title": {
                  "text": "Multiple Selections"
                },
                "subtitle": {
                  "text":". Click To Clear Selection"
                },
                "legend":{
                    "toggle-action":"remove",
                    "align":"center",
                    "adjust-layout":false,
                    "borderWidth":0,
                    "verticalAlign":"bottom",
                    "fontColor":"#7d7d7d",
                    "font-size":10,
                    "marginRight":20,
                    "marginBottom":0,
                    "marginTop":0,
                    "marker":{
                        "type":"square"
                    },
                },
                "preview":{
                    "background-color":"#F5F7F3",
                    "border-width":0,
                    "height":29,
                    "preserve-zoom":false,
                    "mask":{
                        "backgroundColor":"white",
                        "alpha":0.8
                    },
                    "handle":{
                        "border-width":1
                    },
                    "y":"85%"
                },
                "scale-x":{
                    "zooming":true,
                    "zoom-to":[0,30],
                    "item":{
                        "font-size":10,
                        "font-color":"#7d7d7d"
                    },
                    "tick":{
                        "visible":false
                    },
                    "title":{
                        "text":"You can Make Multiple Selections And Click To Clear selection"
                    },
                    "minValue":1484782109655,
                    "step":"day",
                    "transform":{
                        "type":"date"
                    }
                },
                "scale-y":{
                    "zooming":false,
                    "values":"0:2.503:0.5006",
                    "guide":{
                        "line-style":"dotted"
                    },
                    "item":{
                        "font-size":10,
                        "font-color":"#7d7d7d"
                    },
                    "tick":{
                        "visible":false
                    },
                    "format":"%v%",
                    "decimals":1
                },
                "zoom":{
                    "active":false,
                    "preserve-zoom":true
                },
                "plotarea":{
                    "margin-top":"20",
                    "margin-left":"20",
                    "margin":"dynamic 50 105 dynamic"
                },
                "plot":{
                    "data-append-selection":true,
                    "mode":"normal",
                    "line-width":1,
                    "line-color":"#4d9900",
                    "background-color":"#1e88e5",
                    "marker":{
                        "size":3,
                        "background-color":"#ccccff #6666ff",
                        "border-width":1,
                        "border-color":"#4d9900"
                    },
                    "tooltip":{
                        "visible":true,
                        "text":"%kv<br>%vv"
                    },
                    "selection-mode":"multiple",
                    "selected-state":{
                        "background-color":"#ffa726",
                        "border-width":0
                    }
                },
                "series":[
                    {
                        "values":[0.8840000000000001,1.9060000000000001,1.35,1.189,0.984,0.619,0.468,0.28700000000000003,2.503,1.139,2.011,1.7389999999999999,0.5559999999999999,0.22899999999999998,0.218,0.761,0.58,1.171,0.8240000000000001,0.721,0.542,0.954,0.683,0.976,1.0290000000000001,0.28800000000000003,0.362,0.388,1.057,0.886,0.196,0.333,1.013,0.541,0.127,0.726,0.649,1.031,0.606,1.232,0.5459999999999999,0.8340000000000001,1.9869999999999999,0.257,0.62,0.571,0.194,0.315,0.45799999999999996,0.14300000000000002,0.126,0.252,0.588,1.419,0.259,0.724,0.295,0.344,0.455,0.27699999999999997,0.604,0.471,0.8200000000000001,0.504,0.209,0.33999999999999997,0.404,0.127,0.293,0.326,0.428,0.38999999999999996,0.562,0.14300000000000002,0.258,0.414,0.42100000000000004,0.6669999999999999,0.8290000000000001,1.369,0.261,1.15,0.644,0.519,0.44400000000000006,0.627,0.411,0.447,0.173,0.763,0.581,1.2710000000000001,0.9129999999999999,0.988,0.51,0.664,0.348,0.5559999999999999,0.28600000000000003,0.424,0.676,0.367,0.634,0.47600000000000003,0.512,0.33999999999999997,0.076,0.27799999999999997,0.291,0.402,0.199,0.21,0.261,0.178,0.315,0.6459999999999999,0.482,0.08499999999999999,0.068,0.40099999999999997,0.135,0.679,0.769,1.113,0.315,0.37,0.267,0.145,1.2309999999999999,0.126,0.217,1.0670000000000002,2.213,0.687,0.63,0.498,0.428,0.154,0.27299999999999996,0.161,0.28900000000000003,0.8130000000000001,0.406,0.553,0.584,0.73,0.347,0.194,0.439,0.28800000000000003,0.561,0.22499999999999998,1.2550000000000001,0.771,0.13,0.644,0.078,0.27899999999999997,0.35100000000000003,0.525,0.735,0.893,0.719,1.375,0.42500000000000004,0.27999999999999997,0.255,0.109,0.411,0.11,0.172,0.698],
                        "text":"Percentage Of Sales"
                    }
                ]
            }
        ]
        },
    }
  }
  render() {
    return (
      <div >
        <ZingChart data={this.state.config}/>
      </div>
    );
  }

}
...