是否有可能像图表中一样使用图表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

如果只想为每个值显示一个破折号，则最好选择scatter chart并将dataset.pointStyle定义为“线”。对于散点图，未定义labels，但必须将数据作为包含x和y属性的对象进行传递。然后，您的xAxes必须定义为time cartesian axis。

注意，Chart.js在内部使用Moment.js作为时间轴的功能。因此，您应该使用在单个文件中包含Moment.js的Chart.js的bundled version。

下面的代码说明了如何完成。

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起正式可用。该功能已与chartjs:master合并到pull request #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>