时间戳

首页 > 解决方案 > 如何制作具有正值和负值的图表，从 0 - x 轴开始

javascript - 如何制作具有正值和负值的图表，从 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",
            type:"linear",
            display: false,
            // position:"left",
            gridLines: {
                drawOnChartArea: false
            },
            scaleLabel: {
                display: true,
                labelString: 'USD',
                beginAtZero: true,
            }
        }]
    },
} });

在此处输入图像描述

标签： javascriptchart.js

解决方案

我强烈建议您查看chart.js
的官方文档 回答您的问题是的，请在此处查看

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

var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
var barChartData = {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [{
        label: 'Dataset 1',
        borderWidth: 1,
        data: [
            -10,
            -40,
            80
        ]
    }, {
        label: 'Dataset 2',
        borderWidth: 1,
        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, data) {
                    var value = tooltipItem.yLabel;
                    return value < 0 ? -value : value;
                }
            }
        },

tooltipItem.yLabel工具提示中的值是指文档

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

此处更改 y 轴值的回调函数参考文档

推荐阅读