使用Chart.js绘制包含CSV数据的折线图
基础概念
Chart.js 是一个基于 HTML5 Canvas 的 JavaScript 图表库，用于创建各种类型的图表，包括折线图、柱状图、饼图等。CSV（Comma-Separated Values）是一种常见的数据交换格式，用于存储表格数据。
相关优势
- 简单易用：Chart.js 提供了简洁的 API，易于上手。
- 高度可定制：支持丰富的配置选项，可以自定义图表的外观和行为。
- 响应式设计：图表能够自适应不同的屏幕尺寸。
- 广泛支持：支持多种浏览器和设备。
类型
Chart.js 支持多种类型的图表，包括：
- 折线图（Line Chart）
- 柱状图（Bar Chart）
- 饼图（Pie Chart）
- 散点图（Scatter Chart）
- 框图（Box Plot）
应用场景
Chart.js 适用于各种需要数据可视化的场景，例如：
- 数据分析报告
- 业务监控仪表盘
- 科研数据展示
- 教育教学图表
示例代码
以下是一个使用 Chart.js 绘制包含 CSV 数据的折线图的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chart.js Line Chart with CSV Data</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<canvas id="myChart"></canvas>
<script>
async function fetchData() {
const response = await fetch('data.csv');
const data = await response.text();
return data.split('\n').map(row => row.split(','));
}
async function createChart() {
const csvData = await fetchData();
const labels = csvData[0].slice(1); // Skip header
const dataset = csvData.slice(1).map(row => parseFloat(row[1])); // Skip header and get values
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: 'CSV Data',
data: dataset,
fill: false,
borderColor: 'rgb(75, 192, 192)',
tension: 0.1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
}
createChart();
</script>
</body>
</html>参考链接
常见问题及解决方法
- CSV 数据格式错误：
- 问题：CSV 数据格式不正确，导致数据解析失败。
- 原因：可能是数据中包含特殊字符或换行符。
- 解决方法：确保 CSV 数据格式正确，可以使用文本编辑器或在线工具进行验证。
- 数据加载失败：
- 问题：数据加载失败，可能是网络问题或文件路径错误。
- 原因：文件路径不正确或网络连接不稳定。
- 解决方法：检查文件路径是否正确，并确保网络连接稳定。
- 图表显示不正确：
- 问题：图表显示不正确，可能是数据解析或配置错误。
- 原因：数据解析错误或 Chart.js 配置不正确。
- 解决方法：检查数据解析逻辑和 Chart.js 配置，确保数据正确传递到图表中。
通过以上步骤和示例代码，你应该能够成功使用 Chart.js 绘制包含 CSV 数据的折线图。如果遇到具体问题，可以根据错误信息进行调试和排查。
相关·内容
我有CSV数据。使用这些数据，我需要使用chart.js library.My csv数据绘制一个简单的折线图，格式如下
data.csv年-53，3.00% 1953-54,3.00% 1954-55,3.50% .
我想年是在x轴和速率是在y轴…我需要做完全使用chart.js.Can任何人帮助我做这件事
浏览 1提问于2016-12-27得票数 1
1回答
我想使用Chart.js库在我的网站上绘制图表，但我打算向图表提供大量的数据(>1,000)。但是，当我将数据提供给chart.js折线图时，该图表不是可滚动的，而是将这些值一起推送到一起，从而使该图表不可读。有没有办法让chart.js折线图可以在x轴上滚动？
浏览 6提问于2014-07-18得票数 7
1回答
我有一个有50.850个点的向量要在折线图类型中绘制。我正在使用chart.js在图形中显示所有这些点，但它没有绘制出来。有人知道chart.js可以显示的点的极限吗？
浏览 25提问于2021-06-25得票数 1
回答已采纳
1回答
我正在尝试用Chart.js绘制一个折线图，它显示了一系列圈速的趋势，但我正在努力将时间字符串解析为正确的格式。
我有一个时间数组，其中包含如下所示的圈速(分钟、秒、毫秒)，我将其用作数据集：
const times = ["1:32.599", "1:32.300", "1:31.000"]
在图表上绘制这些数据的最佳方法是什么？根据文档，Chart.js支持使用moment.js的轴，但它似乎不会解析这些字符串，可能是因为它们不是日期，因为它们是持续时间而不是特定的时间点。
{
type: 'line',
data
浏览 9提问于2018-01-20得票数 2
回答已采纳
我正在使用Chart.js绘制一个简单的折线图。
我有下面的折线图数据，可以很好地工作。三个数据值映射到三个标签。
var lineChartData = {
labels : ["January","February","March"],
datasets : [
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
浏览 0提问于2014-06-21得票数 1
1回答
我想用chart.js绘制折线图
我可以绘制折线图，但希望在'Y‘轴上显示用户定义的值。即。如果我在Y轴上有一些值，即2，那么我想在2的下方和上方添加一些数据。
我有一些我想创造的形象。
在上面图片中，我有一些平均值，所以我想在平均值的上下加上+1s，+2s和+3s。
帮我个忙。谢谢
浏览 0提问于2016-03-30得票数 0
我正在使用Chart.js v2绘制一个简单的折线图。一切看起来都很好，除了有一些我不想要的网格线：
折线图的文档在这里：，但是我找不到任何关于隐藏这些“网格线”的东西。
如何删除网格线？
浏览 435提问于2016-04-17得票数 194
回答已采纳
3回答
我想知道是否有可能在chart.js图的顶部覆盖一条线，例如折线图？例如，在x轴上，将在图表中值为20处绘制一条水平线。
浏览 0提问于2015-01-22得票数 7
回答已采纳
我正在尝试绘制两个熊猫数据帧。一个数据帧需要在同一图形上显示为折线图，另一个数据帧显示为散点图。
这将绘制第一个数据帧：
line = pd.read_csv('nugt_daily.csv',parse_dates=['Date'])
line = line.sort_values(by='Date')
line.set_index('Date',inplace=True)
line['Close'].plot(figsize=(16, 12))
我想在前面的图上绘制以下数据帧-但作为散点图(而不是折线图)：
p
浏览 2提问于2016-10-19得票数 0
在Flex3中，我有一个折线图。我的折线图数据提供程序只包含一项。
当我绘制折线图时，它会绘制点。但是它没有显示数据提示。
如果dataprovider中存在多个项，则它会起作用。
如何使用包含单个数据项的dataprovider使折线图显示数据提示？
浏览 4提问于2011-06-06得票数 0
我需要一些帮助，将这些数据点从this .csv文件绘制成折线图。 我正在尝试绘制美国和越南在2005年、2010年、2015年和2016年的卫生人员数量。因此，x值为2005、2010、2015、2016，y值为# of personnel。 问题是，我不知道从哪里开始！当.csv文件如此之大时，我不太确定如何指定要提取哪些数据点。我通常习惯于包含非常简单的数据的.csv文件： 0, 1
1, 1
2, 3
3, 5
4, 7
5, 8 可以通过here访问我正在尝试处理的实际.csv文件。 任何帮助都将不胜感激！
浏览 41提问于2020-10-11得票数 0
1回答
在图表上显示数据。%s
、、、
我正在使用angular，我需要绘制一个图形/图表，我有一个包含名称和时间的数据。 在上述情况下，name表示客户的名称，time表示他进行呼叫的时间(单个客户可以进行多个呼叫，因此一个客户可以进行多次呼叫)。我想画一张图表，这样我们就可以看到客户这次打电话。 我尝试使用chart.js，并尝试折线图和散点图，但无法获得所需的结果。任何我可以使用的图表和/或如何实现这一点的建议 提前谢谢你
浏览 42提问于2021-02-10得票数 0
我使用由Chart.js呈现的折线图。我使用多个数据集，而数据集只包含一个数据点(x，y) (来自业务域)。
图表显示了悬停时每个点(x，y，标签)的信息，但是我希望每个点旁边都有一个标签，默认情况下/每次都会显示相应的标签。
在我的研究中，我找不到任何解决方案。
有什么建议吗？这真的可以用Chart.js实现吗？
浏览 1提问于2016-12-17得票数 0
1回答
我正在使用chart.js绘制简单的折线图。我想在我的直线上显示红色的点。例如，我将一个数组作为从1到100的数字的数据集进行传递。我想显示红色，这些点是偶数的。这在chart.js中是可能的吗？
我知道我可以遍历该数组，从该数组中取出偶数值，然后将该数组传递给数据集。在这方面你能帮上忙吗？以下是我的数据集代码
这是我的数据集
datasets: [
{
label: 'Assay Values',
fill: false,
lineTension: 0,
backg
浏览 21提问于2017-03-10得票数 1
我在chart.js中创建了一个折线图，用于绘制来自金融市场的数据。
如何从x轴控制网格线的宽度？
数据是基于时间的，当图表开始时，网格线之间的空间太大。
随着数据的添加，图表会自动压缩空间。
我想控制间距到一个统一的数量，我可以从一开始设置。
任何帮助都非常感谢。
浏览 0提问于2018-05-03得票数 2
我使用了chart.js的折线图。折线图包含两个数据集。我试图实现的是，当用户悬停在其中一个数据点上时，它还必须显示落在同一轴上的另一个数据集的数据，就像Chart js中的示例：
但是我的图表的工具提示看起来像这样：
我想要显示在同一工具提示中，当它悬停在同一轴的任何一个数据中时，检入和切入的数量。
浏览 17提问于2018-07-30得票数 1
回答已采纳
我在试着画一个线条加条形图。每当我尝试绘制折线图时(我尝试只绘制折线图，同样的错误)，在第一个点之前绘制一条线：
这是我第一次尝试Chart.js 2.0，我画的其他图表看起来都很棒，除了这个...有什么想法吗？
代码：
function Data() {
$scope.barChartData = {
labels: $scope.mesesLabels,
datasets: [
{
type: 'bar',
label: "" +
浏览 3提问于2016-07-28得票数 0
使用Chart.js版本2.8.0绘制基本折线图。注意到最右边的数据点被切断了。但是最左边的数据点(第一个数据点)看起来完好无损。
我已经通过更改pointRadius的值来更改数据点圆的大小。但即使是最小的值，数据点仍然会被截断。
我没有使用任何插件或花哨的设置。我正在用浅灰色的背景色填充图表。但除此之外，其他的都是标准的Chart.js。
我在这里重新创建了这个问题：
这是我的选项设置。
options: {
legend: {
display: false,
},
tooltips: {
callbacks: {
浏览 22提问于2019-07-28得票数 3
回答已采纳
我在使用ChartJS应用程序接口时遇到了一个问题，因为我需要绘制线条图形，但是线条应该垂直绘制而不是水平绘制。 我能找到的唯一反应就是在“标准”水平折线图中绘制静态垂直线，但这不是我需要的功能。 我认为ChartJS应该有任何图形类型或Line图形类型中的选项来实现这一点，但我没有看到它。 使用"chart.js": "2.9.3" 我需要这样的东西： ? 谢谢你的回答。
浏览 22提问于2021-01-18得票数 1
1回答
我正在使用chart.js，并试图将两个插件添加到同一图表中，但当应用时，这两个插件都会消失，并且控制台中没有直接错误。
有没有人知道如何在同一张图上实现两个插件？
<code>C0</code>
<code>C1</code>
基本上，图形必须在折线图上显示数据标签，同时绘制yAxis线，但只能从折线图上的点开始。
由于某些原因，当两者都应用时，图表将不会显示它们中的任何一个。
<code>A2</code>
超文本标记语言.js代码
<code>A3</code>
浏览 17提问于2019-08-22得票数 2
回答已采纳
我正在使用Chart.js渲染折线图，我希望我的数据以相反的方式绘制，即最高的数字显示在底部，最低的数字显示在顶部。我可以通过设置负的scaleSteps来实现这一点，但是Y轴上的实际标签丢失了。有没有办法也有这些标签。请在此处查看示例：
var myNewChart = new Chart(ctx).Line(data, {
scaleShowGridLines: false,
scaleOverride: true,
scaleStartValue: 10,
scaleStepWidth: 1,
scaleSt
浏览 3提问于2015-01-05得票数 3
我正在尝试用chart.js绘制8个系列的折线图，但初始绘制、通过单击图例打开/关闭seria和/或向系列添加一些点都非常慢。有时需要10秒。我是否在选项中遗漏了一些神奇的“加速属性”，或者这是正常的？
实际上，我需要实时绘制和更新大约10个系列，每个2000个点，这可能与一些合理的更新时间？
这是我正在使用的示例：
浏览 0提问于2019-06-01得票数 0
我正在尝试使用Python在csv excel文件中绘制包含两个独立列的折线图。该文件包含5列有关2016年上映的电影的详细信息，它们是:电影标题/发行日期/发行商/流派/MPAA/售票量。
在这个特定的场景中，我试图将发行日期和售出的门票数量绘制为折线图，然后找出哪个月的售票率最高。这就是我到目前为止所拥有的，但我不确定从哪里开始，再加上我一直遇到很多错误。如果有人能帮上忙，我将不胜感激。
import pandas as pd
from datetime import datetime
import csv
import matplotlib.pyplot as plt
import ma
浏览 1提问于2019-12-05得票数 1
我开始使用chart.js的最新测试版v2，因为我需要在同一张图上绘制一个既包含堆叠条形图又包含非堆叠线形图的图表。下面是我需要的一个示例：
在这个图表中，线条没有堆叠，都显示了它们的自然值，但条形图是堆叠的，显示了这些值的总和(包括一些负值)。
我已经设法将两个图表绘制在一起，但到目前为止，我只能成功地将两个图表堆叠在一起，或者我必须使用两个单独的y轴，最终得到两个刻度。在这个中有一个单独的y轴的例子
yAxes: [{
stacked: false,
ticks: {
beginAtZero: true
}
}, {
id:
浏览 14提问于2016-01-22得票数 14
我使用的是Chart.js 2.5。我的情况是，我有一个包含40个数据的数据集，但我只想在折线图中显示7个数据，但仍然可以水平向左/向右移动以发现其余数据。
我尝试了ticks.maxTicksLimit，ticks.max等，但是，它只是缩放了XAxis标签，所有40个数据仍然显示。
有人能帮上忙吗？谢谢
浏览 2提问于2017-05-11得票数 4
我最近从Chart.js v2升级到了v3。我正在用一个基于时间的x轴绘制实时折线图，它随着时间的推移而滚动。 在Chart.js v3中，当我的x轴记号标签开始接近图表的左边缘时，它会调整图表大小以适合完整的标签。如附图所示，这在我的图表左侧创建了一个空的间隙。在Chart.js v2中，它不会调整图形大小，而是允许标签溢出画布。 ? 我的x轴选项是： {
type: 'time',
axis: 'x',
min: minDate.getTime(),
max: maxDate.getTime()
time: {},
tick
浏览 11提问于2021-08-31得票数 0
我正在使用Chart.js根据设计师的特定方向构建折线图，并且我希望我的工具提示中包含一个小图标。
有可能吗？
浏览 3提问于2015-06-16得票数 3
1回答
我有一个支持excel 2010宏的工作簿。工作簿有几个工作表。第一张图纸有一个宏指定按钮，用于导入csv文件。csv文件加载到名为“Data”的现有工作表中。导入的csv文件加载到列中，其中第1行用作下面数据的标题。例如，A1被命名为“time”，单元格A2 down是时间数据。单元格B1被命名为“temperature”，单元格B2 down是与每次读数相关的温度数据。该工作簿中有第三个现有工作表，名为“Temperature Plot”。我想通过引用“数据”表中的值，在这张表上自动绘制温度与时间的关系图。(时间是x轴，Temp是y轴)
问题是，加载到“数据”表中的导入csv文件每次都会有
浏览 0提问于2013-02-05得票数 0
使用Chart.js 2.0，如何绘制带有y轴类别的折线图？
以下是我的代码
var ctx = $("#myChart");
var scatterChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["January", "February", "March"],
datasets: [{
label: "January
浏览 0提问于2016-06-06得票数 4
Chart.js 2.0折线图
我只需要显示当前点的悬停状态，而不是整个数据集。
Chart.js文档中有这个例子，
这是我的图表在我悬停在一个点上时的样子。
谢谢。
浏览 21提问于2016-07-24得票数 0
我正在做一个测验应用程序，我有一个函数的最终分数在app.js中，现在我想绘制一个基于用户结果的图形(显示在条形图中，比如6对，4错之类)，所以我写了一个函数来使用chart.js 2在另一个文件( chart.js )中绘制图形。问题是我不能将最终分数从app.js传递到chart.js。最后，我也想展示一下这张图。注意:我在这里使用了折线图，只是为了检查我的值是否通过。App.js export default function App() {
return (
<div className='app
浏览 25提问于2020-09-18得票数 0
回答已采纳
我有一个页面，其中包含多个图表与NVD- chart.js的。图表放在仪表板中，因此仪表板的每个部分都包含一个图表。此仪表板包含两个折线图。问题是第二个折线图的工具提示放在了错误的左边，所以它离它的折线图很远。我试图使用这段代码通过更改容器来更改工具提示的位置，但没有任何更改：
chart.interactiveLayer.tooltip.chartContainer(d3.select('#chart_ligne svg'));
有谁知道如何使用chartContainer吗？
浏览 0提问于2015-09-21得票数 0
1回答
需要自定义图形行为
、、、、
在我的angular 5应用程序中，我使用chart.js库来绘制带有两个系列的折线图。以下是来自ts文件的代码： this.myChart = new Chart(this.ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: 'Data1',
data: [100, 345, 657, 788, 300],
fill: false,
backgroundColor: '#3C96D2&#
浏览 40提问于2019-09-19得票数 1
使用chart.js v2，是否可以将折线图中的数据集标记为在初始加载时被禁用？
在中找不到对应的选项。
浏览 3提问于2016-04-26得票数 80
回答已采纳
1回答
在使用时，可以使用谷歌电子表格作为数据源吗？
我想使用Chart.js创建一个包含多条线的折线图，并且希望用户能够一次查看所有线或选择要显示的某些线。使用Chart.js看起来相当简单，然而，我想知道如何使图表对客户端可更新。
客户已经在谷歌电子表格中有一个数据集，他们定期更新，所以我想让网站上的图表随着电子表格一起更新。
我是否只需要将Google电子表格导出为JSON文件？
浏览 9提问于2017-08-18得票数 0
我想使用列'date‘、'value1’、'value2‘和'value3’绘制折线图。我不想在绘图时将topics1、topics2和topics3包含在我的图表中，但是当我单击线时，相应的主题应该会弹出。这是我的数据表My data format，这是示例数据文件，它有数千行这样的行，这是一个外部csv文件。 对如何做到这一点有什么建议吗？谢谢
浏览 5提问于2019-01-18得票数 0
回答已采纳
我用Chart.js绘制了一个折线图，并在底部显示了X轴：
xAxes: [{ type: 'linear',
position: 'bottom',
我想要两个X轴，一个在底部，一个在顶部。我在文档中看到position是一个字符串，因此只有一个值。
有可能做到这一点吗？
浏览 0提问于2016-12-23得票数 7
1回答
我需要显示每年的招聘广告总数。打印工作岗位最多的一年，并绘制一个简单的折线图，看看工作岗位是否每年都在增加。 如何从csv文件中提取数据？ all_data = pd.read_csv('all_data_master.csv')
all_data = all_data.replace('\\N',np.nan) ?
浏览 6提问于2019-12-11得票数 0
我有一个来自chart.js的线形图。我想删除最后一个点，但是对于折线图，removeData()方法没有参数，而对于极线图，它支持removeData(atIndex)。因此，对于折线图，默认情况下removeData()只删除第一个点。
如何在不先删除所有数据的情况下只删除最后一个点？
浏览 1提问于2016-03-18得票数 0
2回答
R曲线图
、
我有一个包含三个变量的数据集，即性别、年龄和BMI，以下是数据样本：
我正在尝试使用plotly软件包绘制r中的折线图，其中X轴显示BMI值，Y轴显示年龄和性别图，两条线对应于BMI和年龄。我正在尝试这些代码，但无法获得正确的输出。以下是我的代码
library(plotly)
data<-read.csv("abc1.csv")
p <- plot_ly(data, x = ~BMI, y = ~Age, type = 'scatter', mode = 'lines',
linetype =
浏览 0提问于2017-11-21得票数 0
1回答
我使用chart.js库创建了一个折线图，并填充线下的区域。
我遇到的问题是，线下的填充不会在图形上的最后一个绘制点停止。曲线下的填充应该在直线停止时停止，但它仍在继续。有没有一种方法可以指定填充区域，使它不会填充超过直线/上一个绘制点？
我查看了文档，找到了一个fill属性，但它并没有解决这个问题。我认为这可能与图表边框或网格线有关。
浏览 10提问于2017-07-25得票数 0
1回答
我一直在尝试使用Chart.JS创建一个简单的折线图来绘制我的数据。
在我的例子中，数据以如下形式出现：
[[1452,100],[1330,100],[1307,100],[1105,100],[1071,200],[1261,100]]
其中，每个片段中的第一个条目是x坐标，第二个条目是y坐标。
在chart.js文档中显示的示例中，x坐标只是文本标签：
var data = {
labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding
浏览 0提问于2016-02-24得票数 1
我想在Chart.js中将“上一场比赛进球次数”数据绘制到折线图中。
我有一个userGoalTime阵列，例如[34, 80, 90]；我有一个opponentGoalTime阵列，例如[39, 42]
Y轴有所有的分钟数，但我不想要X轴上的任何东西。问题是，我认为chart.js必须在X轴上表示一个值(如果这有意义的话)
谁能解释一下如何在图表上只使用Y轴来绘制点？
尝试的解决方案：
let ctx = canvas.getContext('2d')
let lineChart = new Chart(ctx, {
type: 'line',
浏览 6提问于2017-12-02得票数 0
我通过ng2-charts使用chart.js来显示一个简单的折线图，该折线图由X值为时间戳的动态数据提供。因此我使用的是chart.js的
当我开始将数据推送到图表中时，一切都很好，但我希望将显示的数据量限制为最大值，因此我实现了一种简单的机制，即在填充时从数组中删除最旧的元素。
此行为似乎会使图表冻结，因此会显示此。
问题在这个stackblitz中显示:只需等待几秒钟，数组就会有三个值(最大值)：
如果我从chart.js中删除"time“配置并手动提供标签，问题就不会出现(但这不是我想要的！)。
因此，问题似乎与时间轴的使用有关。我已经尝试了上面提到的bug中解释的解决方案
浏览 1提问于2020-02-03得票数 0
我正在使用Chart.js库构建一个图表。考虑以下Chart.js折线图：
因此，这里使用了两个数据集，一个用于红线，一个用于绿线。我想隐藏其中的一个数据集，例如红色的那个。这将导致红线不显示我想要的。
但是，我还希望工具提示应该显示两个数据集(包括隐藏的数据集)的数据。
这有可能吗？
浏览 14提问于2020-02-24得票数 0
回答已采纳
3回答
我正在尝试在ASP.NET中绘制折线图。我想从excel文件中导入一些数据，并在浏览时将它们显示在折线图中。
到目前为止，我已经知道了如何导入数据并在网格中显示它们。现在，我想把它带到下一步，并使用该数据绘制折线图。
请告诉我如何在ASP.NET (仅限C#)中绘制折线图的一些指南。
浏览 7提问于2013-05-11得票数 3
回答已采纳
我正在使用chart.js绘制一个带有点和工具提示的折线图，为了防止Ajax造成的闪烁，我正在销毁我的旧折线图并重新创建它。但是，我的工具提示现在不起作用了！我不确定是什么原因造成的，任何帮助都将不胜感激。你可以在下面找到我的代码。
这是通过更改Dropdown-Selection的值来触发Ajax-Call：
var data;
$('#KurveWatt').change(function(){
var y = this.value;
if(y == 'kW/Tag')
{
浏览 1提问于2016-03-30得票数 0
我在result.csv文件中有以下数据，需要绘制成折线图。
ColA ColB
93 46
94 56
95 66
97 76
100 86
103 96
110 106
我所拥有的是
from numpy import genfromtxt
import matplotlib.pyplot as plt
per_data=genfromtxt('result.csv',delimiter=','
plt.xlabel ('x stuff')
plt.ylabel (&
浏览 0提问于2016-04-27得票数 6
回答已采纳
我有一个页面，其中包含多个图表与NVD- chart.js的。图表放在仪表板中，因此仪表板的每个部分都包含一个图表。此仪表板包含两个折线图。问题是第二个折线图的工具提示错误地放在左边，所以它离它的折线图很远。
我尝试了很多代码，比如：
1)
chart.interactiveLayer.tooltip.chartContainer(d3.select('#chart_ligne svg'));
我想使用这行代码来强制工具提示的容器，但没有任何更改
2)
chart.interactiveLayer.tooltip.position({"left":50})
浏览 2提问于2015-09-08得票数 3
使用Chart.js ()的样例折线图代码，我能够在js fiddle中或在独立页面上创建完美的折线图。
问题是，当将完全相同的配置代码插入到我的项目中并转换为自定义的Knockout绑定时，它不会显示本应位于图表左边缘和底部边缘的数据标签。除此之外，它看起来和样本完全一样，就像它应该的一样。
我的代码太复杂了，不能包含在这里，所以我寻找的只是随机的胡言乱语，可能是什么导致了这种情况的发生？因为Chartjs输出一个画布元素，所以我发现诊断这个问题几乎是不可能的。
提前感谢您的任何建议！
浏览 3提问于2014-08-27得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
