Можно ли создать только верхний колонтитул в виде видимой гистограммы с диаграммой js, как на картинке

Question

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

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["2015-01", "2015-02", "2015-03"],
    datasets: [{
      label: '# of Tomatoes',
      data: [12, 19, 13],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)'
       
      ],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)'
        
      ],
      borderWidth: 1
    }]
  },
  options: {
    responsive: false,
    scales: {
      xAxes: [{
        ticks: {
          maxRotation: 90,
          minRotation: 80
        }
      }],
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

body {
  background-color: #a3d5d3;
}

<canvas id="myChart" height="200"></canvas>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.js"></script>

Answer 1

Если вы просто хотите отобразить да sh для каждого значения, вам лучше выбрать точечную диаграмму и определить dataset.pointStyle как «линию». Для точечных диаграмм labels не определено, но данные должны передаваться как объекты, содержащие свойства x и y. Тогда ваш xAxes должен быть определен как временная декартова ось .

Обратите внимание, что диаграмма. js внутри использует Момент. js за функциональность оси времени. Поэтому вам следует использовать связанную версию диаграммы. js, которая включает Момент. js в одном файле.

Следующий код иллюстрирует, как это можно сделать.

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'scatter',
  data: {
    datasets: [{
      label: '# of Tomatoes',
      data: [
        { x: "2015-01", y: 12 },
        { x: "2015-02", y: 19 },
        { x: "2015-03", y: 3 },
        { x: "2015-04", y: 5 },
        { x: "2015-05", y: 2 },
        { x: "2015-06", y: 3 },
        { x: "2015-07", y: 20 },
        { x: "2015-08", y: 3 },
        { x: "2015-09", y: 5 },
        { x: "2015-10", y: 6 },
        { x: "2015-11", y: 2 },
        { x: "2015-12", y: 1 }
      ],
      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)',
        '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)',
        '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)'
      ],
      pointStyle: 'line',
      pointRadius: 10,
      pointHoverRadius: 10
    }]
  },
  options: {
    responsive: false,
    scales: {
      xAxes: [{        
        offset: true,
        type: 'time',
        time: {
          unit: 'month',
          displayFormats: {
            month: 'YYYY-MM'   
          },
          tooltipFormat: 'YYYY-MM'          
        },
        ticks: {
          maxRotation: 90,
          minRotation: 80
        },
        gridLines: {
          offsetGridLines: true
        }
      }],
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

body {
  background-color: #a3d5d3;
}

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

Answer 2

Если я правильно понимаю ваш вопрос, вам нужны плавающие бары , которые официально доступны с Chart. js v2.9.0 . Функция была объединена в график js: мастер с запросом на выдачу # 6056 . Отдельные бары теперь можно указывать с помощью синтаксиса [min, max].

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["2015-01", "2015-02", "2015-03", "2015-04", "2015-05", "2015-06", "2015-07", "2015-08", "2015-09", "2015-10", "2015-11", "2015-12"],
    datasets: [{
      label: '# of Tomatoes',
      data: [[11,12], [18,19], [2,3], [4,5], [1,2], [2,3], [19,20], [2,3], [4,5], [5,6], [1,2], [0,1]],
      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)',
        '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)',
        '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
    }]
  },
  options: {
    responsive: false,
    scales: {
      xAxes: [{
        ticks: {
          maxRotation: 90,
          minRotation: 80
        }
      }],
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

body {
  background-color: #a3d5d3;
}

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