omi-chart - add ie test
This commit is contained in:
dntzhang
parent
38d2ea30c3
commit
7e505c4a74
|
|
@ -0,0 +1,364 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
</style>
|
||||
<script src="./libs/webcomponents-bundle.js"></script>
|
||||
<script src="https://www.chartjs.org/dist/2.7.3/Chart.bundle.js"></script>
|
||||
<script src="https://tencent.github.io/omi/packages/omio/dist/omi.min.js"></script>
|
||||
<script src="https://tencent.github.io/omi/packages/omio/dist/omi.min.js"></script>
|
||||
<script>
|
||||
var createElement = Omi.createElement
|
||||
var define = Omi.define
|
||||
var WeElement = Omi.WeElement
|
||||
var render = Omi.render
|
||||
|
||||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
||||
|
||||
var _omi = typeof require === 'function' ? require('omi') : window.Omi
|
||||
|
||||
var _chart = typeof require === 'function' ? require('chart.js') : window.Chart
|
||||
|
||||
var _chart2 = _interopRequireDefault(_chart);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
||||
|
||||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
|
||||
|
||||
var ChartBase = function (_WeElement) {
|
||||
_inherits(ChartBase, _WeElement);
|
||||
|
||||
function ChartBase() {
|
||||
_classCallCheck(this, ChartBase);
|
||||
|
||||
return _possibleConstructorReturn(this, (ChartBase.__proto__ || Object.getPrototypeOf(ChartBase)).apply(this, arguments));
|
||||
}
|
||||
|
||||
_createClass(ChartBase, [{
|
||||
key: 'receiveProps',
|
||||
value: function receiveProps(props) {
|
||||
this.chart.data = props.data;
|
||||
this.chart.options = props.options;
|
||||
this.chart.update();
|
||||
}
|
||||
}, {
|
||||
key: 'render',
|
||||
value: function render(props) {
|
||||
var _this2 = this;
|
||||
|
||||
return Omi.createElement(
|
||||
'div',
|
||||
{ style: { width: props.width + 'px', height: props.height + 'px' } },
|
||||
Omi.createElement('canvas', {
|
||||
ref: function ref(e) {
|
||||
_this2.canvas = e;
|
||||
}
|
||||
})
|
||||
);
|
||||
}
|
||||
}]);
|
||||
|
||||
return ChartBase;
|
||||
}(_omi.WeElement);
|
||||
|
||||
(0, _omi.define)('chart-bar', function (_ChartBase) {
|
||||
_inherits(_class, _ChartBase);
|
||||
|
||||
function _class() {
|
||||
_classCallCheck(this, _class);
|
||||
|
||||
return _possibleConstructorReturn(this, (_class.__proto__ || Object.getPrototypeOf(_class)).apply(this, arguments));
|
||||
}
|
||||
|
||||
_createClass(_class, [{
|
||||
key: 'installed',
|
||||
value: function installed() {
|
||||
this.chart = new _chart2.default(this.canvas.getContext('2d'), {
|
||||
type: this.props.horizontal ? 'horizontalBar' : 'bar',
|
||||
data: this.props.data,
|
||||
options: this.props.options
|
||||
});
|
||||
}
|
||||
}]);
|
||||
|
||||
return _class;
|
||||
}(ChartBase));
|
||||
|
||||
(0, _omi.define)('chart-line', function (_ChartBase2) {
|
||||
_inherits(_class2, _ChartBase2);
|
||||
|
||||
function _class2() {
|
||||
_classCallCheck(this, _class2);
|
||||
|
||||
return _possibleConstructorReturn(this, (_class2.__proto__ || Object.getPrototypeOf(_class2)).apply(this, arguments));
|
||||
}
|
||||
|
||||
_createClass(_class2, [{
|
||||
key: 'installed',
|
||||
value: function installed() {
|
||||
this.chart = new _chart2.default(this.canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: this.props.data,
|
||||
options: this.props.options
|
||||
});
|
||||
}
|
||||
}]);
|
||||
|
||||
return _class2;
|
||||
}(ChartBase));
|
||||
|
||||
(0, _omi.define)('chart-radar', function (_ChartBase3) {
|
||||
_inherits(_class3, _ChartBase3);
|
||||
|
||||
function _class3() {
|
||||
_classCallCheck(this, _class3);
|
||||
|
||||
return _possibleConstructorReturn(this, (_class3.__proto__ || Object.getPrototypeOf(_class3)).apply(this, arguments));
|
||||
}
|
||||
|
||||
_createClass(_class3, [{
|
||||
key: 'installed',
|
||||
value: function installed() {
|
||||
this.chart = new _chart2.default(this.canvas.getContext('2d'), {
|
||||
type: 'radar',
|
||||
data: this.props.data,
|
||||
options: this.props.options
|
||||
});
|
||||
}
|
||||
}]);
|
||||
|
||||
return _class3;
|
||||
}(ChartBase));
|
||||
|
||||
(0, _omi.define)('chart-scatter', function (_ChartBase4) {
|
||||
_inherits(_class4, _ChartBase4);
|
||||
|
||||
function _class4() {
|
||||
_classCallCheck(this, _class4);
|
||||
|
||||
return _possibleConstructorReturn(this, (_class4.__proto__ || Object.getPrototypeOf(_class4)).apply(this, arguments));
|
||||
}
|
||||
|
||||
_createClass(_class4, [{
|
||||
key: 'installed',
|
||||
value: function installed() {
|
||||
this.chart = new _chart2.default.Scatter(this.canvas.getContext('2d'), {
|
||||
data: this.props.data,
|
||||
options: this.props.options
|
||||
});
|
||||
}
|
||||
}]);
|
||||
|
||||
return _class4;
|
||||
}(ChartBase));
|
||||
|
||||
(0, _omi.define)('chart-doughnut', function (_ChartBase5) {
|
||||
_inherits(_class5, _ChartBase5);
|
||||
|
||||
function _class5() {
|
||||
_classCallCheck(this, _class5);
|
||||
|
||||
return _possibleConstructorReturn(this, (_class5.__proto__ || Object.getPrototypeOf(_class5)).apply(this, arguments));
|
||||
}
|
||||
|
||||
_createClass(_class5, [{
|
||||
key: 'installed',
|
||||
value: function installed() {
|
||||
this.chart = new _chart2.default(this.canvas.getContext('2d'), {
|
||||
type: 'doughnut',
|
||||
data: this.props.data,
|
||||
options: this.props.options
|
||||
});
|
||||
}
|
||||
}]);
|
||||
|
||||
return _class5;
|
||||
}(ChartBase));
|
||||
|
||||
(0, _omi.define)('chart-pie', function (_ChartBase6) {
|
||||
_inherits(_class6, _ChartBase6);
|
||||
|
||||
function _class6() {
|
||||
_classCallCheck(this, _class6);
|
||||
|
||||
return _possibleConstructorReturn(this, (_class6.__proto__ || Object.getPrototypeOf(_class6)).apply(this, arguments));
|
||||
}
|
||||
|
||||
_createClass(_class6, [{
|
||||
key: 'installed',
|
||||
value: function installed() {
|
||||
this.chart = new _chart2.default(this.canvas.getContext('2d'), {
|
||||
type: 'pie',
|
||||
data: this.props.data,
|
||||
options: this.props.options
|
||||
});
|
||||
}
|
||||
}]);
|
||||
|
||||
return _class6;
|
||||
}(ChartBase));
|
||||
|
||||
(0, _omi.define)('chart-polar-area', function (_ChartBase7) {
|
||||
_inherits(_class7, _ChartBase7);
|
||||
|
||||
function _class7() {
|
||||
_classCallCheck(this, _class7);
|
||||
|
||||
return _possibleConstructorReturn(this, (_class7.__proto__ || Object.getPrototypeOf(_class7)).apply(this, arguments));
|
||||
}
|
||||
|
||||
_createClass(_class7, [{
|
||||
key: 'installed',
|
||||
value: function installed() {
|
||||
this.chart = new _chart2.default.PolarArea(this.canvas.getContext('2d'), {
|
||||
data: this.props.data,
|
||||
options: this.props.options
|
||||
});
|
||||
}
|
||||
}]);
|
||||
|
||||
return _class7;
|
||||
}(ChartBase));
|
||||
|
||||
(0, _omi.define)('chart-bubble', function (_ChartBase8) {
|
||||
_inherits(_class8, _ChartBase8);
|
||||
|
||||
function _class8() {
|
||||
_classCallCheck(this, _class8);
|
||||
|
||||
return _possibleConstructorReturn(this, (_class8.__proto__ || Object.getPrototypeOf(_class8)).apply(this, arguments));
|
||||
}
|
||||
|
||||
_createClass(_class8, [{
|
||||
key: 'installed',
|
||||
value: function installed() {
|
||||
this.chart = new _chart2.default(this.canvas.getContext('2d'), {
|
||||
type: 'bubble',
|
||||
data: this.props.data,
|
||||
options: this.props.options
|
||||
});
|
||||
}
|
||||
}]);
|
||||
|
||||
return _class8;
|
||||
}(ChartBase));
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body style="background-color:#eee;">
|
||||
|
||||
<script>
|
||||
|
||||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
||||
|
||||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
|
||||
|
||||
/* @jsx createElement */
|
||||
define('my-app', function (_WeElement) {
|
||||
_inherits(_class2, _WeElement);
|
||||
|
||||
function _class2() {
|
||||
var _ref;
|
||||
|
||||
var _temp, _this, _ret;
|
||||
|
||||
_classCallCheck(this, _class2);
|
||||
|
||||
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
||||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = _class2.__proto__ || Object.getPrototypeOf(_class2)).call.apply(_ref, [this].concat(args))), _this), _this.onClick = function () {
|
||||
_this.chartData.datasets.forEach(function (dataset) {
|
||||
dataset.data.forEach(function (item, index) {
|
||||
dataset.data[index] = Math.random() * 100;
|
||||
});
|
||||
});
|
||||
_this.update();
|
||||
}, _temp), _possibleConstructorReturn(_this, _ret);
|
||||
}
|
||||
|
||||
_createClass(_class2, [{
|
||||
key: "install",
|
||||
value: function install() {
|
||||
this.chartData = {
|
||||
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
|
||||
datasets: [{
|
||||
label: '# of Votes',
|
||||
data: [12, 19, 3, 5, 2, 3],
|
||||
backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)'],
|
||||
borderColor: ['rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)'],
|
||||
borderWidth: 1
|
||||
}]
|
||||
};
|
||||
|
||||
this.chartOptions = {
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}]
|
||||
}
|
||||
};
|
||||
}
|
||||
}, {
|
||||
key: "render",
|
||||
value: function render(props, data) {
|
||||
return createElement(
|
||||
"div",
|
||||
null,
|
||||
createElement("chart-bar", { width: Math.min(window.innerWidth - 30, 575), data: this.chartData, options: this.chartOptions }),
|
||||
createElement(
|
||||
"div",
|
||||
null,
|
||||
createElement(
|
||||
"button",
|
||||
{ onClick: this.onClick },
|
||||
"random data"
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
}]);
|
||||
|
||||
return _class2;
|
||||
}(WeElement));
|
||||
|
||||
render(createElement("my-app", null), 'body');
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
</style>
|
||||
<script src="./libs/webcomponents-bundle.js"></script>
|
||||
<script src="https://www.chartjs.org/dist/2.7.3/Chart.bundle.js"></script>
|
||||
<script src="https://tencent.github.io/omi/packages/omio/dist/omi.min.js"></script>
|
||||
<script src="https://tencent.github.io/omi/packages/omi/dist/omi.min.js"></script>
|
||||
<script>
|
||||
var createElement = Omi.createElement
|
||||
var define = Omi.define
|
||||
|
|
|
|||
Loading…
Reference in New Issue