如何制作从0-x轴开始同时具有正值和负值的图表

如何解决如何制作从0-x轴开始同时具有正值和负值的图表

我试图制作一张如图所示的图表。主要问题是我无法使用chart.js制作此类图表。是否可以使用chart.js制作此图表？ 我有两个数据集，第一个是收入值，第二个是费用值。因此，我必须将收入值放在0-X轴以上，将支出值放在0-x轴以下。差异将显示在该线图中。

到目前为止，我尝试过的是：

var chart = new Chart(ctx,{
type: 'bar',data: {
    labels: ['January','February','March','April','May','June','July'],datasets: [{
            label: 'Dataset 1',backgroundColor: 'red',yAxisID: 'y',data: ds
        },{
            label: 'Dataset 2',// backgroundColor: 'blue',yAxisID: 'y1',data: ds2
        }
    ]
},options: {
    responsive: true,title: {
        display: true,text: 'Chart.js Bar Chart - Multi Axis'
    },tooltips: {
        mode: 'index',intersect: true
    },scales: {
        yAxes: [{
            id:"y",type:"linear",display: true,position:"left",},{
            id:"y1",display: false,// position:"left",gridLines: {
                drawOnChartArea: false
            },scaleLabel: {
                display: true,labelString: 'USD',beginAtZero: true,}
        }]
    },} });

解决方法

我强烈建议您查看chart.js的官方文档
对您问题的回答是，请检查here

在该类型图表的简单代码段下面。您可以更改输入数据和其他属性，例如条形颜色等。

var MONTHS = ['January','February','March','April','May','June','July','August','September','October','November','December'];
var barChartData = {
    labels: ['January','July'],datasets: [{
        label: 'Dataset 1',borderWidth: 1,data: [
            -10,-40,80
        ]
    },{
        label: 'Dataset 2',data: [
            10,20,30,]
    }]

};

var ctx = document.getElementById('canvas').getContext('2d');
new Chart(ctx,{
    type: 'bar',data: barChartData,options: {
        responsive: true,legend: {
            position: 'top',},title: {
            display: true,text: 'Chart.js Bar Chart'
        },tooltips: {
            callbacks: {
                label: function(tooltipItem,data) {
                    var value = tooltipItem.yLabel;
                    return value < 0 ? -value : value;
                }
            }
        },scales: {
            xAxes: [{
              stacked: false
            }],yAxes: [{
              stacked: false,ticks: {
                callback: function(value,index,values) {
                  return value < 0 ? -value : value;
                }
              }
            }]
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<canvas id="canvas" style="display: block; width: 1417px; height: 708px;" width="1417" height="708"></canvas>

编辑：对代码段进行了更改，以使y轴为正，onHover数据为正。

tooltips: {
            callbacks: {
                label: function(tooltipItem,

tooltipItem.yLabel是工具提示中的值，请参考documentation

 ticks: {
                callback: function(value,values) {
                  return value < 0 ? -value : value;
                }
              }

此处用于更改y轴值的回调函数请参见documentation