当前位置: 首页 > 知识库问答 >
问题:

Chart.js日期和时间条形图不渲染-线工程虽然

桂梓
2023-03-14

我正在使用图表.js创建一个日期时间条形图,根据上次扫描的日期和时间显示多个服务器中的玩家数量。但是,由于某种原因,条形图将无法呈现。如果我使用折线型图表,它呈现得很好。有人知道为什么条形图不会呈现吗?我在开发人员工具中没有任何控制台错误。

小提琴是这样的:

https://jsfiddle.net/j3rmjzpw/2/

超文本标记语言:

<canvas id='playerChartLine' width='800' height='400'></canvas>
<canvas id='playerChartBar' width='800' height='400'></canvas>

Javascript/jQuery:

$( document ).ready(function() {
    renderChartJS("line", "playerChartLine", [{x: "2017-07-04T01:51:02-06:00", y: 240}, {x: "2017-07-04T10:51:02-06:00", y: 150}], "Total Number of Players Playing", "Date", "Players", "188,4,0", 0); // Number of players
    renderChartJS("bar", "playerChartBar", [{x: "2017-07-04T01:51:02-06:00", y: 240}, {x: "2017-07-04T10:51:02-06:00", y: 150}], "Total Number of Players Playing", "Date", "Players", "188,4,0", 0); // Number of players
});


function renderChartJS(chartType, elemId, data, title, xAxisLabel, yAxisLabel, rgbaColorStr, yMax){

    var ticksObj = {
        suggestedMin: 0,
        beginAtZero: true,   
        stepValue: 50,          
    }

    if(yMax != 0){
        ticksObj.max = yMax;
    }

    if(data.length){
        var ctx = document.getElementById(elemId).getContext('2d');
        var myChart = new Chart(ctx, {
            type: chartType,
            data: {
                datasets: [{
                    label: yAxisLabel,
                    data: data,
                    borderColor: "rgba(" + rgbaColorStr + ",1)",
                    backgroundColor: "rgba(" + rgbaColorStr + ",0.5)"
                }],
            },
            options: {
                responsive: false,
                maintainAspectRatio: true,
                scaleBeginAtZero: true,
                title:
                {
                    display: true,
                    text: title
                },
                scales: {
                    xAxes: [{
                        type: "time",
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: xAxisLabel
                        },
                        ticks: {
                            minRotation: 90,
                            maxRotation: 90,
                            stepValue: 10,
                            autoSkip: true,
                            maxTicksLimit: 50
                        },
                        time: {
                            unit: 'minute',
                            unitStepSize: 10,
                            max: data[data.length - 1].x
                        }
                    }],
                    yAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: yAxisLabel
                        },
                        ticks: ticksObj
                    }]
                }

            }
        });
    }
}

底部图表应为条形图,但未正确呈现。

有人知道发生了什么事吗?

共有1个答案

呼延源
2023-03-14

问题是,条形图不支持您提供的数据格式类型。

您应该使用以下类型的数据格式...

renderChartJS("line", "playerChartLine", ["2017-07-04T01:51:02-06:00", "2017-07-04T10:51:02-06:00"], [240, 150], "Total Number of Players Playing", "Date", "Players", "188,4,0", 0); // Number of players
renderChartJS("bar", "playerChartBar", ["2017-07-04T01:51:02-06:00", "2017-07-04T01:59:02-06:00"], [240, 150], "Total Number of Players Playing", "Date", "Players", "188,4,0", 0); // Number of players

在这里,第三个参数用于x轴标签,第四个参数用于data

这是你的代码的工作版本。。。

$(document).ready(function() {
   renderChartJS("line", "playerChartLine", ["2017-07-04T01:51:02-06:00", "2017-07-04T10:51:02-06:00"], [240, 150], "Total Number of Players Playing", "Date", "Players", "188,4,0", 0); // Number of players
   renderChartJS("bar", "playerChartBar", ["2017-07-04T01:51:02-06:00", "2017-07-04T01:59:02-06:00"], [240, 150], "Total Number of Players Playing", "Date", "Players", "188,4,0", 0); // Number of players
});

function renderChartJS(chartType, elemId, labels, data, title, xAxisLabel, yAxisLabel, rgbaColorStr, yMax) {

   var ticksObj = {
      suggestedMin: 0,
      beginAtZero: true,
      stepValue: 50,
   }

   if (yMax != 0) {
      ticksObj.max = yMax;
   }

   if (data.length) {
      var ctx = document.getElementById(elemId).getContext('2d');
      var myChart = new Chart(ctx, {
         type: chartType,
         data: {
            labels: labels,
            datasets: [{
               label: yAxisLabel,
               data: data,
               borderColor: "rgba(" + rgbaColorStr + ",1)",
               backgroundColor: "rgba(" + rgbaColorStr + ",0.5)"
            }],
         },
         options: {
            responsive: false,
            maintainAspectRatio: true,
            scaleBeginAtZero: true,
            title: {
               display: true,
               text: title
            },
            scales: {
               xAxes: [{
                  type: "time",
                  display: true,
                  scaleLabel: {
                     display: true,
                     labelString: xAxisLabel
                  },
                  ticks: {
                     minRotation: 90,
                     maxRotation: 90,
                     stepValue: 10,
                     autoSkip: true,
                     maxTicksLimit: 50
                  },
                  time: {
                     unit: 'minute',
                     unitStepSize: 10,
                     max: data[data.length - 1].x
                  }
               }],
               yAxes: [{
                  display: true,
                  scaleLabel: {
                     display: true,
                     labelString: yAxisLabel
                  },
                  ticks: ticksObj
               }]
            }

         }
      });
   }
}
<script src="https://github.com/chartjs/Chart.js/releases/download/v2.6.0/Chart.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id='playerChartLine' width='800' height='400'></canvas>
<canvas id='playerChartBar' width='800' height='400'></canvas>
 类似资料:
  • 我使用chart.js在我的网页上有一个BarChart。 我在其中添加了两个数据点 现在我想要更新那些条A和B,而不是删除它们并再次添加它们(我已经想好了如何做到这一点)。我想让它们垂直移动以适应它们的新值,但我无法找到如何访问图表中已经存在的数据。 没有什么比得上 其中第一个值将是存储数据的索引(F.E.)。 我该怎么做呢?

  • 材质 着色器控制的模型表面外形 光照 光照、阴影控制及环境设置 粒子系统 各种类型粒子特效的创建及使用

  • 我使用的是Chart.js2.6,我已经实现了horizontalLine插件,在条形图上显示平均值。它可以正常工作,但是当工具提示显示在与直线相交的位置时,它部分被水平线本身覆盖。我试图找出如何使工具提示在水平线上方绘制。 我知道工具提示是canvas元素的一部分,因此没有z-index属性。我怎样才能做到这一点? 下面是我使用的水平线插件。 ... 然后我使用以下命令将其添加到条形图选项中 它

  • 以为一面挂了,没想到还是进二面了 无手撕,大概40min,主问项目,图形学和cpp 总体表现自我评价比一面好很多,(一面教训:会的东西如果不能清楚的表达出来就必须认为是没有掌握) ---图形学的部分总体表现还可以 对过程中的知识点做一个简单总结,可能有部分遗漏(并非面试原问题,但囊括了下面的内容): 前向渲染和延迟渲染的对比和各自优劣 PBR流程和理论 阴影贴图技术(级联,立方体阴影贴图的优化和实

  • 线形图,区域图和条形图允许您在 X/Y 轴上绘制数据。 首先,您需要选择定义值轴的 指标 。 指标聚合: Count 计数 聚合返回所选索引模式中元素的原始计数。 Average 该聚合返回数字字段的平均值 。从下拉菜单中选择一个字段。 Sum 总和 聚合返回数字字段的总和。从下拉菜单中选择一个字段。 Min 最小值 聚合返回数字字段的最小值。从下拉菜单中选择一个字段。 Max 最大值 聚合返回数

  • 我刚刚开始使用Chart.js,我很快就变得非常沮丧。我有我的堆叠条形图工作,但是我不能让点击“事件”工作。 我在图表中找到了对GitHub的评论。js声明使用函数<code>getBarsAtEvent 我在画布元素上设置了一个事件监听器(正确的方式): ...然而在我的< code>handleClick函数中,< code > chart . getbarsatevent 是未定义的! 现在