Chart.js динамически заполняет данные в Oracle Application Express

Question

Chart.js динамически заполняет данные в Oracle Application Express

1

Привет, я подаю иск в библиотеку chart.js 2.7 с помощью приложения Oracle express, и я столкнулся с проблемой с передачей массива данных.

Я установил одинаковые поля переменных для хранения массива для диаграммы, но график не отображается/отображается.

note: P79_.. - это элемент страницы (текстовое поле), содержащий массив из специальных запросов.

Какие-либо предложения? заранее спасибо

здесь мой код

<script>


var BUDGET1 =[document.getElementById("P79_BUDGET1_AC").value]
var BUDGET2 =[document.getElementById("P79_BUDGET2_AC").value]

var ACTUAL1 =[document.getElementById("P79_ACTUAL1_AC").value]
var ACTUAL2 =[document.getElementById("P79_ACTUAL2_AC").value]

new Chart(document.getElementById("mixed-chart"), {
    type: 'bar',
    data: {
      labels: ["P01", "P02", "P03", "P04","P05", "P06", "P07", "P08", "P09", "P10", "P11", "P12"],
      datasets: [{
          label: "Plan1",
          type: "line",
          borderColor: "#c45850",
          data: BUDGET1,
          fill: false
        }, {
          label: "Plan2",
          type: "line",
          borderColor: "#3e95cd",
          data: BUDGET2,
          fill: false
        }, {
          label: "Actual1",
          type: "bar",
          backgroundColor: "#ffbb99",
          backgroundColorHover: "#ff9933",
          data: ACTUAL1,
        }, {
          label: "Actual2",
          type: "bar",
          backgroundColor: "#99ffbb",
          backgroundColorHover: "#00ff40",
          data: ACTUAL2
        }
      ]
    },
    options: {
      title: {
        display: true,
        text: 'Plan Trend'
      },
          tooltips: {
      callbacks: {
        // this callback is used to create the tooltip label
        label: function(tooltipItem, data) {
          // get the data label and data value to display
          // convert the data value to local string so it uses a comma seperated number
          var dataLabel = data.labels[tooltipItem.index];
          var value = ': ' + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].toLocaleString();

          // make this isn't a multi-line label (e.g. [["label 1 - line 1, "line 2, ], [etc...]])
          if (Chart.helpers.isArray(dataLabel)) {
            // show value on first line of multiline label
            // need to clone because we are changing the value
            dataLabel = dataLabel.slice();
            dataLabel[0] += value;
          } else {
            dataLabel += value;
          }

          // return the text to display on the tooltip
          return dataLabel;
        }
      }
    },
      legend: { display: true}     
    }
});

</script>

Genna Hendrix 06 апр. 2018, в 14:17

Источник

0

Не используйте тег apex Salesforce для вопросов oracle-apex .
Tony Andrews 09 апр. 2018, в 11:51

Теги:

javascript

chart.js

oracle

oracle-apex-5

2 ответа

Ещё вопросы

Не используйте тег apex Salesforce для вопросов oracle-apex .

Genna Hendrix · Answer 1 · 2018-04-08T04-20-00.000Z

Я последовал за предложением "преобразовать строку в массив" и здесь результат без двойных кавычек:

введите описание изображения здесь

К несчастью, массив по-прежнему не отображается в диаграмме, я читал, что иногда может быть полезно реализовать метод обновления для диаграммы, но я не уверен, как применить его к моему коду...

Спасибо за помощь

romeuBraga · Answer 2 · 2018-04-07T01-49-00.000Z

Я не знаю, работают ли эти инструкции для создания этих массивов. Можете попробовать использовать console.log в этих значениях, чтобы проверить, работает ли это?

var BUDGET1 =[document.getElementById("P79_BUDGET1_AC").value]
var BUDGET2 =[document.getElementById("P79_BUDGET2_AC").value]
console.log(BUDGET1);
console.log(BUDGET2);
var ACTUAL1 =[document.getElementById("P79_ACTUAL1_AC").value]
var ACTUAL2 =[document.getElementById("P79_ACTUAL2_AC").value]
console.log(ACTUAL1);
console.log(ACTUAL2);

* Вы можете выполнить этот код на консоли. На хромированном нажатии F12 перейдите к консоли.

Посмотрите это сообщение, чтобы узнать, как преобразовать строку с запятыми в массив. Преобразование строки с запятыми в массив