<!DOCTYPE HTML>
<html>
<head>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
theme: "theme2",//theme1
title:{
text: "Basic Column Chart - CanvasJS"
},
animationEnabled: false, // change to true
data: [
{
// Change type to "bar", "area", "spline", "pie",etc.
type: "column",
dataPoints: [
{ label: "apple", y: 10 },
{ label: "orange", y: 15 },
{ label: "banana", y: 25 },
{ label: "mango", y: 30 },
{ label: "grape", y: 28 }
]
}
]
});
chart.render();
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
</html>我可以使用 vaadin 代码使用 JavaScript 动态生成代码吗？我还没有尝试过附加部分。
enter code here
//stackchange.js
function calc2DArrMulti(dArr) {
let vLen = dArr.length;
let eLen = dArr[0].length;
const result = [];
const flip = new Array(eLen);
for (let j = 0; j < eLen; j++) {
flip[j] = new Array(vLen);
for (let i = 0; i < vLen; i++) {
flip[j][i] = dArr[i][j];
if (result[i] == null) result[i] = new Array(eLen);
}
}
for (let i = 0; i < eLen; i++) {
let min = Math.min.apply(null, flip[i]);
for (let j = 0; j < vLen; j++) {
let v = flip[i][j];
result[j][i] = v / min;
}
}
return {
origin: dArr,
calc: result
};
};<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!--Vaadin-charts-->
<script src="js/jquery.js"></script>
<script src="js/stackchange.js"></script>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="bower_components/vaadin-charts/vaadin-charts.html">
<!-- <link rel="import" href="bower_components/vaadin-charts/ybtest.html">-->
<!--stacked-->
<script>
//----------------임의 데이터 만들기------------------//
var fab1 = [5, 2200, 100000, 6000000, 5200000, 2200, 100000, 6000000, 5200000,124,124,124,124,124,124];
var fab2 = [7, 2200, 130000, 4600000, 4200000, 2200, 100000, 6000000, 5200000,124,124,124,124,124,124];
var fab3 = [7, 2200, 100700, 5600000, 9200000, 2200, 100000, 6000000, 5200000,124,124,124,124,124,124];
var fab4 = [7, 2200, 100700, 5600000, 9200000, 2200, 100000, 6000000, 5200000,124,124,124,124,124,124];
var fab5 = [7, 2200, 100700, 5600000, 9200000, 2200, 100000, 6000000, 5200000,124,124,124,124,124,124];
var test = new Array(5);
// var test2 = new Array(4);
//2차원 배열 선언!!
for (var i = 0; i < test.length; i++) { //2
test[i] = new Array(5);
}
for (var i = 0; i < fab1.length; i++) {
test[0][i] = fab1[i];
test[1][i] = fab2[i];
test[2][i] = fab3[i];
test[3][i] = fab4[i];
test[4][i] = fab4[i];
}
//2차원 배열에 1차원 배열 넣기!!
//----------------임의 데이터 만들기------------------//
var test2 = calc2DArrMulti(test);
var test3 = stackchange(test);
</script>
<!-- <script>
$("#test-chart").append("<template><vaadin-column-chartid='dateAxisAndClickEvent'on-point-click='pointClickListener'><x-axis><categories>Fab1,Fab2,Fab3,Fab4,Fab5</categories></x-axis><y-axisallow-decimals='false'min='0'><stack-labelsenabled='false'></stack-labels></y-axis><tooltipformatter='function(){return(test3.origin[this.series.index][this.point.x])}'></tooltip><plot-options><chart-areastacking='percent'></chart-area><columnstacking='percent'><data-labelsenabled='true'color='white'formatter='function(){return(test3.origin[this.series.index][this.point.x])}'></data-labels></column></plot-options><legendlayout='vertical'align='right'vertical-align='top'x='-40'y='80'floating='true'border-width='1'background-color='#FFFFFF'shadow='true'></legend><data-seriesname='1'id='mytib'data='[[mytib]]'></data-series><data-seriesname='2'id='myext'data='[[myext]]'></data-series><data-seriesname='3'id='mybxt'data='[[mybxt]]'></data-series><data-seriesname='4'id='mycxt'data='[[mycxt]]'></data-series><data-seriesname='5'id='mydxt'data='[[mydxt]]'></data-series><data-seriesname='6'id='mydxx'data='[[mydxx]]'></data-series><data-seriesname='7'id='mydxz'data='[[mydxz]]'></data-series><data-seriesname='8'id='mydxy'data='[[mydxy]]'></data-series><data-seriesname='9'id='mydxr'data='[[mydxr]]'></data-series><data-seriesname='10'id='mydxh'data='[[mydxh]]'></data-series><data-seriesname='11'id='mydx1'data='[[mydx1]]'></data-series><data-seriesname='12'id='mydx2'data='[[mydx2]]'></data-series><data-seriesname='13'id='mydx3'data='[[mydx3]]'></data-series><data-seriesname='14'id='mydx4'data='[[mydx4]]'></data-series><data-seriesname='15'id='mydx5'data='[[mydx5]]'></data-series></vaadin-column-chart></template>");
</script>-->
<dom-module id=test-chart>
<template>
<vaadin-column-chart id='dateAxisAndClickEvent' on-point-click='pointClickListener'>
<x-axis>
<categories>Fab1,Fab2,Fab3,Fab4,Fab5</categories>
</x-axis>
<y-axis allow-decimals='false' min='0'>
<stack-labels enabled='false'></stack-labels>
</y-axis>
<tooltip formatter= 'function() { return (test3.origin[this.series.index][this.point.x])}'></tooltip>
<plot-options>
<chart-area stacking='percent'>
</chart-area>
<column stacking='percent'>
<data-labels enabled='true' color='white' formatter= 'function() { return (test3.origin[this.series.index][this.point.x])}'></data-labels>
</column>
</plot-options>
<legend layout='vertical' align='right' vertical-align='top' x='-40' y='80' floating='true' border-width='1' background-color='#FFFFFF' shadow='true'></legend>
<data-series name='1'id='mytib' data='[[mytib]]'></data-series>
<data-series name='2'id='myext' data='[[myext]]'></data-series>
<data-series name='3'id='mybxt' data='[[mybxt]]'></data-series>
<data-series name='4'id='mycxt' data='[[mycxt]]'></data-series>
<data-series name='5'id='mydxt' data='[[mydxt]]'></data-series>
<data-series name='6'id='mydxx' data='[[mydxx]]'></data-series>
<data-series name='7'id='mydxz' data='[[mydxz]]'></data-series>
<data-series name='8'id='mydxy' data='[[mydxy]]'></data-series>
<data-series name='9'id='mydxr' data='[[mydxr]]'></data-series>
<data-series name='10' id='mydxh' data='[[mydxh]]'></data-series>
<data-series name='11' id='mydx1' data='[[mydx1]]'></data-series>
<data-series name='12' id='mydx2' data='[[mydx2]]'></data-series>
<data-series name='13' id='mydx3' data='[[mydx3]]'></data-series>
<data-series name='14' id='mydx4' data='[[mydx4]]'></data-series>
<data-series name='15' id='mydx5' data='[[mydx5]]' ></data-series>
</vaadin-column-chart>
</template>
</dom-module>
<script>
Polymer({
is: 'test-chart',
properties: {
mytib: {
type: Array,
value: test3.calc[0]
},
myext: {
type: Array,
value: test3.calc[1]
},
mybxt: {
type: Array,
value: test3.calc[2]
},
mycxt: {
type: Array,
value: test3.calc[3]
},
mydxt: {
type: Array,
value: test3.calc[4]
},
mydxx: {
type: Array,
value: test3.calc[5]
},
mydxz: {
type: Array,
value: test3.calc[6]
},
mydxy: {
type: Array,
value: test3.calc[7]
},
mydxr: {
type: Array,
value: test3.calc[8]
},
mydxh: {
type: Array,
value: test3.calc[9]
},
mydx1: {
type: Array,
value: test3.calc[10]
},
mydx2: {
type: Array,
value: test3.calc[11]
},
mydx3: {
type: Array,
value: test3.calc[12]
},
mydx4: {
type: Array,
value: test3.calc[13]
},
mydx5: {
type: Array,
value: test3.calc[14]
},
},
pointClickListener: function(a) {
var b = a.detail.originalEvent,
c = a.detail.point,
d = b.chartX,
f = b.chartY;
this.showLabel(c.series.name+':' + test3.origin[c.series.index][c.x], d, f)
},
showLabel: function(a, b, c) {
var d = this.$.dateAxisAndClickEvent.chart.renderer.label(a, b, c).attr({
fill: 'red',
// Highcharts.getOptions().colors[5],
padding: 5,
r: 5,
zIndex: 8
}).css({
color: '#FFFFFF'
}).add();
this.async(function() {
d.fadeOut()
}, 1e3)
}
});
</script>
<test-chart></test-chart>
</body>
</html>我还没有尝试过附加部分。
我想像画布一样编写 vaadin 图表。
可能吗？
如果可能，我应该怎么做？