结合不同粒度的chart.js条形图和折线图

问题描述：

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

The following HTML page generates a combined bar and line chart:

<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>

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

The number of items in each dataset for both of these chart types are currently equal.

我想增加折线图的粒度，以便在同一区域内显示更多详细信息，但是，当向折线图数据集中添加更多项目时，而不是显示

I would like to increase the granularity of the line chart so that it will display more detail within the same area, however, when more items are added to the line chart dataset, rather than showing more detail, the extra items are cut off, so they are not displayed.

如何增加折线图的粒度？

How can I increase the granularity of the line chart?

答

标签数组中的值数是将在图表上显示的值数。

The number of values in the labels array is the number of values that will be shown on the chart.

结合不同粒度的chart.js条形图和折线图

相关推荐