AO1411 Ответов: 1

Множественная линейная диаграмма не отображает метки - chart js

Привет,

Мне нужно отобразить несколько строк данных на диаграмме javascript. Я успешно отображаю диаграмму, но по какой-то причине метка просто не отображается.

Я попробовал несколько примеров, но не нашел точно, что мне нужно сделать.

Что я уже пробовал:

<head>
<script>var chart = new CanvasJS.Chart("chartContainer", {
                title: {
                    text: "Data"
                },
                data: [
                    {
                        label: "Name1",
                        type: "line",
                        dataPoints: [
                            { x: 10, y: 21 },
                            { x: 11, y: 25 },
                            { x: 12, y: 30 }


                        ]
                    },
                    {
                        label: "Name2",
                        type: "line",
                        dataPoints: [
                            { x: 10, y: 31 },
                            { x: 11, y: 20 },
                            { x: 12, y: 15 }

                        ]
                    }
                ]
            });
            chart.render();</script>
</head>

<body>
    <canvas id="canvas"></canvas>
    <div id="chartContainer" style="height: 300px; width: 100%;"></div>
    <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>

1 Ответов

Рейтинг:
9

Sandeep Mewara

Я вижу, что прекрасно работает следующее:

var ctx = document.getElementById("myChart");

var myChart = new Chart(ctx, {
  type: 'scatter',
  data: {
    datasets: [
    	{
        label: 'Chart 1',
        data: [{x: 1, y: 2}, {x: 2, y: 4}, {x: 3, y: 8},{x: 4, y: 16}],
        showLine: true,
        fill: false,
        borderColor: 'rgba(0, 200, 0, 1)'
    	},
      {
        label: 'Chart 2',
        data: [{x: 1, y: 3}, {x: 3, y: 4}, {x: 4, y: 6}, {x: 6, y: 9}],
        showLine: true,
        fill: false,
        borderColor: 'rgba(200, 0, 0, 1)'
    	}
    ]
  },
  options: {
    tooltips: {
      mode: 'index',
      intersect: false,
    },
    hover: {
      mode: 'nearest',
      intersect: true
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero:true
        }
      }]
    },
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="myChart"></canvas>

Ссылка: Chart.js - отображение нескольких линейных диаграмм с использованием нескольких меток - переполнение стека[^]