Как создать диаграмму с несколькими осями Y в HTML, где оба значения Y являются пользовательскими? - PullRequest
Новая
       9

Как создать диаграмму с несколькими осями Y в HTML, где оба значения Y являются пользовательскими?

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

Пример того, что я собираюсь сделать Я бы предпочел сделать это в HTML, а не в Excel, поскольку на данный момент мне не нужно сохранять какую-либо эту информацию и не хочу создавать заново электронная таблица каждый день. На данный момент это всего лишь подтверждение концепции, показывающей живые данные за день.

У меня есть приличное понимание HTML, но я ни в коем случае не эксперт.

Я пытаюсь создать диаграмму для отображения фактического и запланированного производства за разные периоды времени. Я пытаюсь, чтобы ось х была временными периодами. Каждый час в течение 8 часов является точкой на оси. И затем иметь два значения оси Y, Actual и Planned, которые будут взяты из текстового поля ввода пользователя на веб-сайте. 

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
window.onload = function () {
  var dps = []; //dataPoints.
    var chart = new CanvasJS.Chart("chartContainer",{              
        title:{
            text: "Planned vs Actual Production"
        },
        axisX:{
          title: "Hour",
            valueFormatString: "####",
            interval: 1
        },
        axisY:[{
            id: "2",
            title: "Planned",
            lineColor: "#369EAD",
            titleFontColor: "#369EAD",
            labelFontColor: "#369EAD"
        }],
        axisY2:[{
            title: "Actual",
            lineColor: "#7F6084",
            titleFontColor: "#7F6084",
            labelFontColor: "#7F6084"
        }],
function addDataPointsAndRender() {
                Actual = Number(document.getElementById("Actual").value);
                Planned = Number(document.getElementById("Actual").value);
                dps.push({
                    axisY: Actual,
                    axisY2: Planned
               });
                chart.render();
            }
    data: [
    {
        type: "column",
        showInLegend: true,
        //axisYIndex: 0, //Defaults to Zero
        name: "Planned",
        xValueFormatString: "####",
        dataPoints: [
            { x: 1, axisY: Planned },
            { x: 2, axisY: Planned },
            { x: 3, axisY: Planned },
            { x: 4, axisY: Planned },
            { x: 5, axisY: Planned },
            { x: 6, axisY: Planned },
            { x: 7, axisY: Planned },
            { x: 8, axisY: Planned }
        ]
    },

    {
        type: "column",
        showInLegend: true,                  
        axisYType: "secondary",
        //axisYIndex: 0, //Defaults to Zero
        name: "Actual",
        xValueFormatString: "####",
        dataPoints: [
            { x: 1, axisY2: Actual },
            { x: 2, axisY2: Actual },
            { x: 3, axisY2: Actual },
            { x: 4, axisY2: Actual },
            { x: 5, axisY2: Actual },
            { x: 6, axisY2: Actual },
            { x: 7, axisY2: Actual },
            { x: 8, axisY2: Actual }
        ]
    },

    ]
    });

    chart.render();}
  var renderButton = document.getElementById("renderButton");
            renderButton.addEventListener("click", addDataPointsAndRender);
</script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</head>
<body>
    Actual:
    <input id="Actual" type="number" step="any" placeholder="Enter Actual">
    Planned:
    <input id="Planned" type="number" step="any" placeholder="Enter Planned">
    <button id="renderButton">Add DataPoint & Render</button>
    <button onClick="window.location.href=window.location.href">Reset Hour</button>
    <div id="chartContainer" style="height: 270px; width: 100%;">
</div>
</body>
</html>

Проблема, с которой я сталкиваюсь, в частности, заключается в получении пользователем ввода в массивы для оси Y и оси Y2

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

Ответы [ 2 ]

0 голосов
/ 05 марта 2020

Canvas JS принимает значения x и y в dataPoints как объект ({x: xValue, y: yValue}). Передача в этом формате должна работать нормально. Пожалуйста, найдите рабочий код ниже: 

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
window.onload = function () {
  var dpsPlanned = [], dpsActual = []; //dataPoints.
  var chart = new CanvasJS.Chart("chartContainer", {              
    title:{
      text: "Planned vs Actual Production"
    },
    axisX:{
      title: "Hour",
      valueFormatString: "####",
      interval: 1
    },
    axisY:[{
      id: "2",
      title: "Planned",
      lineColor: "#369EAD",
      titleFontColor: "#369EAD",
      labelFontColor: "#369EAD"
    }],
    axisY2:[{
      title: "Actual",
      lineColor: "#7F6084",
      titleFontColor: "#7F6084",
      labelFontColor: "#7F6084"
    }],
    data: [
      {
        type: "column",
        showInLegend: true,
        //axisYIndex: 0, //Defaults to Zero
        name: "Planned",      
        dataPoints: dpsPlanned
      },

      {
        type: "column",
        showInLegend: true,                  
        axisYType: "secondary",
        //axisYIndex: 0, //Defaults to Zero
        name: "Actual",      
        dataPoints: dpsActual
      },

    ]
  });
  chart.render();

  function addDataPointsAndRender() {
    var actual = Number(document.getElementById("Actual").value);
    var planned = Number(document.getElementById("Planned").value);
    dpsActual.push({ y: actual });
    dpsPlanned.push({ y: planned });
    chart.render();
  }
  
  var renderButton = document.getElementById("renderButton");
  renderButton.addEventListener("click", addDataPointsAndRender);
 
}
</script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</head>
<body>
    Actual:
    <input id="Actual" type="number" step="any" placeholder="Enter Actual">
    Planned:
    <input id="Planned" type="number" step="any" placeholder="Enter Planned">
    <button id="renderButton">Add DataPoint & Render</button>
    <button onClick="window.location.href=window.location.href">Reset Hour</button>
    <div id="chartContainer" style="height: 270px; width: 100%;">
</div>
</body>
</html>
0 голосов
/ 28 февраля 2020

Похоже, что это может быть вашей проблемой: 

Actual = Number(document.getElementById("1").value);
Planned = Number(document.getElementById("2").value);

Первое, что здесь ... Ваши входные идентификаторы не "1" и "2", они "Фактические" и "Запланированные" .getElementById("Actual").value, .getElementById("Planned").value

Другое дело, что вы объявляете глобальные переменные с Actual = Number(... вместо var actual = Number(... Я не знаю достаточно о вашей области действия, чтобы сказать, что это неправильно, но что-то рассмотреть.

...