- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
根据 HighCharts 文档,我正在研究此处给出的示例,以便能够添加和呈现数据表:
“我可以在导出的图表中添加数据表吗?”
是的,在 Highcharts 数据和绘图 API 上进行一些编程,您就可以绘制表格。参见 http://jsfiddle.net/highcharts/z9zXM/源代码和实例。”
我正在尝试弄清楚如何将数据表呈现到与图表不同的容器中。感谢您的帮助。
来自 JS Fiddle:
/**
* Create the data table
*/
Highcharts.drawTable = function() {
// user options
var tableTop = 310,
colWidth = 100,
tableLeft = 20,
rowHeight = 20,
cellPadding = 2.5,
valueDecimals = 1,
valueSuffix = ' °C';
// internal variables
var chart = this,
series = chart.series,
renderer = chart.renderer,
cellLeft = tableLeft;
// draw category labels
$.each(chart.xAxis[0].categories, function(i, name) {
renderer.text(
name,
cellLeft + cellPadding,
tableTop + (i + 2) * rowHeight - cellPadding
)
.css({
fontWeight: 'bold'
})
.add();
});
$.each(series, function(i, serie) {
cellLeft += colWidth;
// Apply the cell text
renderer.text(
serie.name,
cellLeft - cellPadding + colWidth,
tableTop + rowHeight - cellPadding
)
.attr({
align: 'right'
})
.css({
fontWeight: 'bold'
})
.add();
$.each(serie.data, function(row, point) {
// Apply the cell text
renderer.text(
Highcharts.numberFormat(point.y, valueDecimals) + valueSuffix,
cellLeft + colWidth - cellPadding,
tableTop + (row + 2) * rowHeight - cellPadding
)
.attr({
align: 'right'
})
.add();
// horizontal lines
if (row == 0) {
Highcharts.tableLine( // top
renderer,
tableLeft,
tableTop + cellPadding,
cellLeft + colWidth,
tableTop + cellPadding
);
Highcharts.tableLine( // bottom
renderer,
tableLeft,
tableTop + (serie.data.length + 1) * rowHeight + cellPadding,
cellLeft + colWidth,
tableTop + (serie.data.length + 1) * rowHeight + cellPadding
);
}
// horizontal line
Highcharts.tableLine(
renderer,
tableLeft,
tableTop + row * rowHeight + rowHeight + cellPadding,
cellLeft + colWidth,
tableTop + row * rowHeight + rowHeight + cellPadding
);
});
// vertical lines
if (i == 0) { // left table border
Highcharts.tableLine(
renderer,
tableLeft,
tableTop + cellPadding,
tableLeft,
tableTop + (serie.data.length + 1) * rowHeight + cellPadding
);
}
Highcharts.tableLine(
renderer,
cellLeft,
tableTop + cellPadding,
cellLeft,
tableTop + (serie.data.length + 1) * rowHeight + cellPadding
);
if (i == series.length - 1) { // right table border
Highcharts.tableLine(
renderer,
cellLeft + colWidth,
tableTop + cellPadding,
cellLeft + colWidth,
tableTop + (serie.data.length + 1) * rowHeight + cellPadding
);
}
});
};
/**
* Draw a single line in the table
*/
Highcharts.tableLine = function (renderer, x1, y1, x2, y2) {
renderer.path(['M', x1, y1, 'L', x2, y2])
.attr({
'stroke': 'silver',
'stroke-width': 1
})
.add();
}
renderer.path(['M', x1, y1, 'L', x2, y2])
.attr({
'stroke': 'silver',
'stroke-width': 1
})
.add();
}
最佳答案
我想你想在不同的容器中呈现表格。因此,为此您可以在示例中使用相同代码的两个容器中使用图表。唯一的区别是您必须在第二个容器中隐藏图表并加载表函数。
window.chart = new Highcharts.Chart({
chart: {
renderTo: 'container2',
events: {
load: Highcharts.drawTable,
},
borderWidth: 2
},
title: {
text: ''
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
visible:false
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
visible:false
},
legend: {
enabled:false
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
visible:false
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5],
visible:false
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0],
visible:false
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8],
visible:false
}]
})
window.chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
events: {
//load: Highcharts.drawTable
},
borderWidth: 2
},
title: {
text: 'Average monthly temperatures'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
}
},
legend: {
//y: -300
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
Fiddle演示
To Do 根据需求调整容器 css
关于javascript - 通过绘图 API 渲染 Highcharts 数据表以将容器分隔为图表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46520116/
如何将导出模块包含到 angular2 应用程序中? 我尝试将以下脚本添加到 index.html 但没有任何反应。 最佳答案 从 Angular CLI 1.0-RC.1 和最新的 angular
我正在为 Web 应用程序使用 HighCharts Javascript 库。当我下载 Highchart 时,我需要 Highchart 水印图像。 我正在使用普通的 hicgchart 代码。
我是 highcharts 的新手。默认情况下,Highchart 在图表本身内显示工具提示。这是否可以在图表外部显示工具提示,并显示在与内部显示相同的位置。有帮助吗? 最佳答案 您可以定义自己的 d
我正在尝试使用日期时间格式的数据创建 highcharts 热图。数据以小时为单位,持续数天。我不希望图表每天都环绕,但希望所有数据都在一条线上。 具体来说,它用于显示每小时的云量百分比,因此每个热图
我正在用 angular 中的简单图形来验证 highcharts。但是导出按钮不显示。我在 html 页面中添加脚本: 并在图表中添加属性: export :true, navigat
我很想知道为什么按钮 2 在这个 example 中不起作用 在这个 jsfiddle 示例中,附加到按钮 1 的“更新”方法正在运行,但在我的原始代码中,“更新”也不起作用。它显示错误:“对象# 没
我正在尝试在 highcharts 中编辑工具提示的边框。 我遇到的问题是我只想显示底部边框。 例如,您可以执行以下操作: tooltip: {borderWidth: 10}//但问题是在整个工具提
Highcharts的十字线可以显示在面积图的顶部而不是隐藏在其下方吗? 这是问题jsfiddle.net/hHjZb/1286/的示例 最佳答案 更新: Highcharts现在已经实现了the O
在将图表导出为PNG时,我试图在饼图上添加图例。 这是我的代码: var chart_23_106; $(document).ready(function () { chart_23_106 = ne
带三角规的半圆饼 如何在图表顶部创建带有三角形仪表的上述半圆饼图。 我的车速表可以工作,但不能满足需要。 在highchart api中有没有办法使用三角形作为仪表,而不是车速表? 谢谢 最佳答案 这
我们使用的是Highchart气泡图,但是,当气泡x和y在图中位于同一位置且气泡y较小时,将无法看到或单击得很少的气泡。 有什么方法可以先绘制较大的气泡,然后在顶部绘制较小的气泡?还是说较小的始终位于
是否可以使用百分比设置 Highcharts 的宽度?每当调整页面大小时,图表应具有足够的响应速度以适合页面大小吗? One Solution 这里的问题是我有3个图表需要并排显示,每次调整页面大小时
我在更新基本列 Highcharts 时遇到问题。 我从服务器返回的 json 数组是: [{"name":"positive","data":[18,35,32,38]},{"name":"nega
有没有办法创建重叠的列? 例如在 this jsFiddle ,蓝色和红色列应如下所示相互重叠,蓝色在后面,红色在前面。 澄清一下,我不想要堆叠的列,蓝色和红色列都应该从 xAxis (y=0) 开始
如何自定义图例 从 对此 最佳答案 查看 Highcharts legend api 选项。您可以使用所需的 css 进一步自定义。使用适当的 svg 图像(背景颜色取自图表本身) legend: {
我正在尝试使用模式作为列范围以允许条形图工作。 图案出现但不使用预定义的图案,所以它只是纯蓝色。通常它使用已定义的条纹图案,并在散点图等上完美运行。 这是一个片段,展示了我的意思: Highchar
我正在使用 HighStock JS 库生成一个图表,该图表使用 xAxis 的线性序列(不是时间序列)。 我仍然想使用范围选择器来缩放到我的线性系列中的预定范围。这可能吗? 例如;说我的 xAxis
我需要从一个系列向下钻取到多个系列。但是下钻 id 在一个系列上似乎是唯一的,这意味着我无法从单个系列下钻到多个系列;只有一个。我该如何解决这个问题? 最佳答案 可以使用 chart.addSingl
我制作了一个带有分组和堆叠列的Highcharts图表,就像在这里的示例http://www.highcharts.com/demo/column-stacked-and-grouped一样。该示例显
如何在 highcharts/highstock 中将滚动条位置设置为Left? 如图表加载时的图像所示, 滚动条自动右对齐。 有没有办法将它定位到左侧? 最佳答案 我们可以通过将 min 设置为 0
我是一名优秀的程序员,十分优秀!