Revision 7059bbcd
Von Bernd Bleßmann vor mehr als 2 Jahren hinzugefügt
- ID 7059bbcd0fa6154b92d3b9a03c0e50533665b413
- Vorgänger b30b38df
| js/kivi.ChartReport.js | ||
|---|---|---|
|  | ||
|   ns.data = undefined;
 | ||
|  | ||
|   ns.background_colors = function() { return [
 | ||
|     'rgba(255, 0, 0, 0.2)',
 | ||
|     'rgba(63, 0, 0, 0.2)',
 | ||
|     'rgba(0, 127, 0, 0.2)',
 | ||
|     'rgba(0, 0, 191, 0.2)',
 | ||
|     'rgba(191, 0, 0, 0.2)',
 | ||
|     'rgba(0, 255, 0, 0.2)',
 | ||
|     'rgba(0, 63, 0, 0.2)',
 | ||
|     'rgba(0, 0, 127, 0.2)',
 | ||
|     'rgba(127, 0, 0, 0.2)',
 | ||
|     'rgba(0, 191, 0, 0.2)',
 | ||
|     'rgba(0, 0, 255, 0.2)',
 | ||
|     'rgba(0, 0, 63, 0.2)'
 | ||
|   ]};
 | ||
|  | ||
|   ns.border_colors = function() { return [
 | ||
|     'rgba(255, 0, 0, 1.0)',
 | ||
|     'rgba(63, 0, 0, 1.0)',
 | ||
|     'rgba(0, 127, 0, 1.0)',
 | ||
|     'rgba(0, 0, 191, 1.0)',
 | ||
|     'rgba(191, 0, 0, 1.0)',
 | ||
|     'rgba(0, 255, 0, 1.0)',
 | ||
|     'rgba(0, 63, 0, 1.0)',
 | ||
|     'rgba(0, 0, 127, 1.0)',
 | ||
|     'rgba(127, 0, 0, 1.0)',
 | ||
|     'rgba(0, 191, 0, 1.0)',
 | ||
|     'rgba(0, 0, 255, 1.0)',
 | ||
|     'rgba(0, 0, 63, 1.0)'
 | ||
|   ]};
 | ||
|  | ||
|   ns.chart = function() {
 | ||
|     $(ns.data.data_y).each(function(idx) {ns.data.data_y[idx] = kivi.parse_amount('' + ns.data.data_y[idx]);});
 | ||
|     console.log("bb: data_y (parsed): "); console.log(ns.data.data_y);
 | ||
|     $(ns.data.datasets).each(function(idx, elt) {
 | ||
|       $(elt).each(function(idx) {elt[idx] = kivi.parse_amount('' + elt[idx]);console.log(elt[idx]);});
 | ||
|     });
 | ||
|  | ||
|     const datasets = [];
 | ||
|     for (let i = 0; i < ns.data.data_labels.length; i++) {
 | ||
|       const set = [];
 | ||
|       $(ns.data.datasets).each(function(idx, elt) {set.push(elt[i]);});
 | ||
|       const colots = [];
 | ||
|       datasets.push({label: ns.data.data_labels[i],
 | ||
|                      data: set,
 | ||
|                      backgroundColor: ns.background_colors()[i % ns.background_colors().length],
 | ||
|                      borderColor: ns.border_colors()[i % ns.border_colors().length],
 | ||
|                      borderWidth: 1
 | ||
|                     });
 | ||
|     }
 | ||
|  | ||
|     const ctx = 'chart';
 | ||
|     const chart = new Chart(ctx, {
 | ||
|       type: 'bar',
 | ||
|       data: {
 | ||
|         labels: ns.data.data_x,
 | ||
|         datasets: [{
 | ||
|             label: ns.data.label_y,
 | ||
|           data: ns.data.data_y,
 | ||
|             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
 | ||
|         }]
 | ||
|         labels: ns.data.labels,
 | ||
|         datasets: datasets,
 | ||
|       },
 | ||
|       options: {
 | ||
|         scales: {
 | ||
| ... | ... | |
|   };
 | ||
|  | ||
|   ns.debug = function() {
 | ||
|     console.log("bb: data_x: "); console.log(ns.data.data_x);
 | ||
|     console.log("bb: data_y: "); console.log(ns.data.data_y);
 | ||
|     console.log("bb: label_x: "); console.log(ns.data.label_x);
 | ||
|     console.log("bb: label_y: "); console.log(ns.data.label_y);
 | ||
|     console.log("bb: labels: "); console.log(ns.data.labels);
 | ||
|     console.log("bb: datasets: "); console.log(ns.data.datasets);
 | ||
|     console.log("bb: data_labels: "); console.log(ns.data.data_labels);
 | ||
|   };
 | ||
|  | ||
|   $(function() {
 | ||
Auch abrufbar als: Unified diff
Reports als Chart: mehrere Y-Werte