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

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

转载作者：行者123 更新时间：2023-12-03 06:26:16

24

4

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

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

我想增加折线图的粒度，以便它能够在同一区域内显示更多详细信息，但是，当将更多项目添加到折线图数据集中时，而不是显示更多详细信息，多余的项目将被删除关闭，因此不会显示它们。

如何增加折线图的粒度？

最佳答案

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

关于javascript - 结合不同粒度的chart.js条形图和折线图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38640607/

24

4

0

文章推荐： javascript - Nodejs : sorting paragraph numbers

文章推荐： javascript - 在 Angular 2 路由器中使用子状态会引发错误

文章推荐： javascript - 模型更改时 ng-options 不更新

支持移动点的iOS库(折线图)
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
【matplotlib实战】--折线图
折线图是一种用于可视化数据变化趋势的图表，它可以用于表示任何数值随着时间或类别的变化。折线图由折线段和折线交点组成，折线段表示数值随时间或类别的变化趋势，折线交点表示数据的转折点。折
typescript 折线图 d3
我是 d3 和 typescript 的新手。我正在尝试使用 d3 v4 和 typescript 创建一个简单的折线图。但是，我收到了一个 typescript 错误，如下图所示: 问题是什么？
Qlikview 折线图，在时间段维度上具有多个表达式
我是 Qlikview 的新手，经过几次失败的尝试后，我不得不请求一些有关 Qlikview 中图表的指导。我想创建折线图，其中包含: 一维 - 一个月的时间段按天数分割一个表达式 - 每天创建的任
java - Android 折线图
我正在尝试使用 Firebase 实时数据库中的数据在 Android 中制作折线图。这是数据库的结构: enter image description here 这是代码: public clas
sql - SSRS基于相同数据类型的多条线 - 折线图
我有一个 TSQL 查询，它提供了一些性能基线的一个月数据。我用折线图显示数据。现在我想在报告中添加更多参数，以提供从两个不同月份选择数据的选项，并将其显示在同一个折线图中以进行比较。我不知道如何开始
R 折线图 - 删除与数据无关的令人烦恼的零线
我有一个简单(但非常大)的数据集，其中包含从 4 月到 8 月在不同站点进行的计数。在 4 月中旬和 7 月之间，没有零计数 - 但零线从最早到最晚的日期延伸。以下是用于制作上述图表的部分数据(列
c# - 折线图 - 更改边框宽度会删除空间
我正在创建一个折线图，我想在不改变线条长度的情况下增加线条的高度或厚度。在增加宽度属性之前，它看起来像这样: 增加宽度属性后，它看起来像这样: 我只想增加 height，但是没有这样的属性，所以我尝
具有值的 JavaFX 折线图
我想在折线图的顶部显示值。我看过this answer这很有帮助，但它改变了折线图节点。我想要的是相同的想法，但不在节点上显示值，而是在它们附近(可能在它们的右侧和上方)显示值，例如:
php - MYSQL转Google图表(折线图)
我正在尝试使用谷歌图表以折线图的形式显示mysql数据。我认为问题出在我尝试格式化谷歌图表数据的部分。我的代码有什么问题吗？ $sth = mysql_query("SELECT * FROM rea
JavaFX CSS 折线图
我有 JavaFX LineChart 和一些带有 XYChart.Series 对象的数据 XYChart.Series series = new XYChart.Series(); series.
python - 模式匹配或比较两个图形(折线图)
给定: 理想图 - 描绘了我的机器应该具有的预期读数。实际图表 - 描述我的机器在该实例中的实际读数。 X轴:来自机器的力(N) Y 轴:时间这两个图都是使用 python 中的 pyplot 库创
javascript - 类似谷歌的股票图表/折线图
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以便用事实和引用来回答。关闭 6 年前。
ASP生成柱型体，折线图，饼图源代码
<% function table2(total,table_x,table_y,all_width,all_height,line_n
r - 根据分类变量过滤 plotly 折线图
我想根据数据中的一列离散值过滤使用 plotly 创建的图表。最终目标是能够使用按钮来更新过滤值，所以我不想事先过滤数据。 library(plotly) df % filter(group1=
linechart - 带有日期轴的 javafx 折线图
我正在尝试在 JavaFX 中创建折线图。此折线图应该有一个轴 (y) 与数字和另一个轴 (x) 与日期。日期范围应该由用户使用两个日期选择器来选择。现在这是我的问题:折线图只有类别和数字轴。有什么方
javascript - 无法将日期传递给 nivo 折线图
我正在使用 nivo 折线图，并希望将 x 轴用作时间线，最多一分钟。不幸的是，我无法呈现该图表，因为它无法正确读取日期。例如，这是我的数据的一部分: { x: "2020-04-24T13:07:
raphael - 有没有办法将网格线添加到 gRaphael 折线图？
我有一个用 gRaphael 创建的折线图。它有轴和刻度线，但我想要网格线。是否有内置的方法来实现这一点或可以帮助我的附加库？最佳答案 gRaphael 没有添加网格线的内置方法，但绘制它们非常容易
.net - 数据表中的 OpenXML 折线图
我正在生成一份报告，该报告是根据查询字符串在网页的页面加载时生成的。我在电子表格中生成的单元格数据完全符合我的要求。现在我需要添加一个折线图。数据是动态的，行数会有所不同。搜索后没有信息，这与在 .
javascript - 从未知数量的点初始化 Highcharts 折线图
我正在尝试使用 highcharts 中每 x 秒更新一次的折线图。理想情况下，我希望它使用一些特定数据进行初始化，并每 x 秒轮询一次 Web 服务，并进行相应更新。目前，我只是尝试使用网络服务中

首页

博学

6Ren·AI

商城

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