时间戳

首页 > 解决方案 > ChartJS 2.9.4 无法在水平条形图上叠加线条数据

chart.js - ChartJS 2.9.4 无法在水平条形图上叠加线条数据

问题描述

我们有一个问题，我们无法使用 ChartJS 2.9.4 将多个图形类型叠加在一起。我们已将其范围缩小到HorizontalBar图表类型。

我看不出下面的脚本代码有什么问题，但 ChartJS 在line添加任何类型时坚持不显示任何内容。目前的双重horizontalBar工作完美。

同样令人沮丧的是，ChartJS 在默认情况下似乎不会以任何方式向控制台显示任何错误或通知信息。

解决方案尝试：

目标：

在此处输入图像描述

代码：

<script>
    Chart.platform.disableCSSInjection = true;
    var ctx = document.getElementById("historicChart");
    var historicChart = new Chart(ctx, {
            type: "horizontalBar",
            data: {
                labels: ["Mar 2017","Mar 2016","Mar 2015","Mar 2014","Mar 2013","Mar 2012","Mar 2011"],
                datasets: [
                    {
                        type: "line",
                        label: "Visits",
                        data: ["3", "4", "1", "5", "6","0"],
                        pointBackgroundColor: '#FFC900',
                        pointRadius: 8,
                        pointStyle: 'circle',
                        showLine: true
                    },
                    {
                        label: "Applicants",
                        data: ["2","4","5","8","9","4","3"],
                        backgroundColor: "#436B94",
                        borderWidth: 0
                    },
                    {
                        label: "Intakes",
                        data: ["1","1","0","1","3","0","1"],
                        backgroundColor: "#C40500",
                        borderWidth: 0
                    }
                ]
            },
            options: {
                scales: {
                    xAxes: [{
                        stacked: false,
                        ticks: {
                            stepSize: 1
                        }
                    }],
                    yAxes: [{
                        stacked: false
                    }]
                }
            }
        }
    );
</script>

<div class='graphbox'>
     <h3>Applicants & Intakes over time</h3>
     <canvas id="historicChart"></canvas>
</div>

我怎样才能做到这一点？

标签： chart.js

解决方案

他们在 v3 中修复了这个问题，所以升级到那个是 1 个解决方案，另一个是降级到 2.8 版，在他们的 repo 上的一个 git 问题中，有人发布了一个解决方法，但这只适用于 2.8 版。

V3：Horizo​​ntalBar 已被删除为一种类型，改为使用条形图并y在您的选项中将索引轴设置为

例子：

var options = {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      },
      {
        type: 'line',
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderWidth: 1
      }
    ]
  },
  options: {
    indexAxis: 'y'
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.js"></script>
</body>

V2 解决方案，如果卡在带有插件支持的 v2 要在 2.8 中实现这一点，您必须将数据指定为对象并指定 x 和 y 坐标

例子：

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'horizontalBar',
  data: {
    datasets: [{
      label: "Clients Signed",
      data: [2, 0, 3, 5, 1, 3, 6, 5, 3, 10]
    }, {
      label: "Quota",
      data: [{
        x: 2,
        y: 'Q2 2015'
      }, {
        x: 2,
        y: 'Q3 2015'
      }, {
        x: 2,
        y: 'Q4 2015'
      }, {
        x: 2,
        y: 'Q1 2016'
      }, {
        x: 2,
        y: 'Q2 2016'
      }, {
        x: 2,
        y: 'Q3 2016'
      }, {
        x: 2,
        y: 'Q4 2016'
      }, {
        x: 2,
        y: 'Q1 2017'
      }, {
        x: 2,
        y: 'Q2 2017'
      }, {
        x: 2,
        y: 'Q3 2017'
      }],
      type: 'line'
    }],
    labels: ["Q2 2015", "Q3 2015", "Q4 2015", "Q1 2016", "Q2 2016", "Q3 2016", "Q4 2016", "Q1 2017", "Q2 2017", "Q3 2017"]
  },
  options: {
    barPercentage: 1.0,
    categoryPercentage: 1.0
  }
});
<body>
  <div class="myChartDiv">
    <canvas id="myChart" width="600" height="400"></canvas>
  </div>
  <script src="https://npmcdn.com/chart.js@2.8.0/dist/Chart.bundle.min.js"></script>
</body>

Git问题：https ://github.com/chartjs/Chart.js/issues/4096

推荐阅读