Question

以下HTML页面生成组合的条形图和折线图：

<html>

<head>
    <title>Combo Bar-Line Chart</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.js"></script>
    <style>
    canvas {
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }
    </style>
</head>

<body>
    <div style="width: 800px">
        <canvas id="canvas"></canvas>
    </div>
    <script>

        var barChartData = {
            labels: ["a","b","c","d","e","f","g"],
            datasets: [{
                type: 'bar',
                label: 'Revenue Per Share',
                backgroundColor: "#eeeeee",
                data: [
                    4.24,
                    4.57,
                    4.70,
                    5.10,
                    5.25,
                    5.76,
                    6.19
                    ],          
                borderColor: '#aaaaaa',
                borderWidth: 1,
                pointRadius: 0,
                fill: true,
                yAxisID: 'y-axis-1'
            }, {
                type: 'line',
                label: 'Share Price',
                backgroundColor: '#88CCFF',
                data: 
                    [
                    40,
                    90,                 
                    45,                 
                    50,
                    60,
                    70,
                    80
                    ],      
                options: {
                    scales: {
                        xAxes: [{
                            ticks: {
                                max: 10,
                                min: 0,
                                stepSize: 0.5
                            }
                        }]
                    }
                },                  
                borderColor: '#aaaaaa',
                borderWidth: 1,
                pointRadius: 0,
                fill: true,
                yAxisID: 'y-axis-2'
            }, ]
        };
        window.onload = function() {
            var ctx = document.getElementById("canvas").getContext("2d");
            window.myBar = new Chart(ctx, {
                type: 'bar',
                data: barChartData,
                options: {
                     legend: {
                         display: false,
                     },
                responsive: true,
                tooltips: {
                  mode: 'label'
              },
              elements: {
                line: {
                    fill: false
                }
            },
              scales: {
                xAxes: [{
                    display: true,
                    gridLines: {
                        display: false
                    },
                    labels: {
                        show: true,
                    }
                }],
                yAxes: [{
                    type: "linear",
                    display: true,
                    position: "left",
                    id: "y-axis-1",
                    gridLines:{
                        display: true
                    },
                    labels: {
                        show: true,

                    }
                }, {
                    type: "linear",
                    display: true,
                    position: "right",
                    id: "y-axis-2",
                    gridLines:{
                        display: false
                    },
                    labels: {
                        show: true,

                    }
                }]
            }
            }
            });
        };
    </script>
</body>

</html>

这两种图表类型的每个数据集中的项目数目前相等。

我想增加折线图的粒度，以便在同一区域内显示更多细节，但是，当更多项目添加到折线图数据集中，而不是显示更多细节时，额外的项目会被切割关闭，所以不显示。

如何增加折线图的粒度？

Answer 1

labels数组中的值的数量是将在图表上显示的值的数量。

合并具有不同粒度的chart.js条形图和折线图

1 个答案: