我可以使用带有switchRowsAndColumns

时间:2016-11-16 21:02:51

标签: highcharts zoom

更新2:我回来看到不同的结果,具体取决于switchRowsAndColumns值的设置。

FWIW:我也试过使用xAxis:{minRange:1},看看是否有帮助。没有运气。

更新1:问题似乎是如果X点值是数字,生活是好的。但如果他们是阿尔法,那就不好了。

如果我有一个从中得到数据的图表,那么我可以缩放工作。如果switchRowsAndColumns设置为false,则表格很长。如果switchRowsAndColumns设置为true,则图表会正确反映更改但是缩放似乎不起作用。我错过了一个设置吗?

好的,这是我正在使用的代码,我想对我的问题进行更正。现在看来,无论switchRowsAndColumns值(true或false),缩放都不起作用('x','y'或'xy')

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>


<script type="text/javascript">
$(function () {
// Parse the data from an inline table using the Highcharts Data plugin
Highcharts.chart('container', {
data: {
table: 'datatable',
switchRowsAndColumns: false
},
chart: {
type: 'column',
zoomType: 'x'
},
title: {
text: 'myTitle',
x: -1
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
}
});
});    </script>

</head>
<body>

<div id="container" style="min-width: 420px; max-width: 600px; height: 400px; margin: 0 auto"></div>

<div >
<table id="datatable" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th></th>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col4</th>
<th>Col5</th>
<th>Col6</th>
<th>Col7</th>
<th>Col8</th>
<th>Col9</th>
<th>Col10</th>
<th>Col11</th>
<th>Col12</th>
<th>Col13</th>
<th>Col14</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row1</td>
<td>91</td>
<td>84</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>93</td>
<td>1</td>
<td>93</td>
<td>96</td>
<td>1</td>
<td>1</td>
<td>93</td>
<td>85</td>
</tr>
<tr>
<td>Row2</td>
<td>100</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>87.5</td>
<td>1</td>
<td>98</td>
<td>95</td>
<td>1</td>
<td>75</td>
<td>92</td>
<td>75</td>
</tr>
<tr>
<td>Row3</td>
<td>75</td>
<td>100</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>83</td>
<td>1</td>
<td>95</td>
<td>95</td>
<td>1</td>
<td>92.5</td>
<td>93</td>
<td>85</td>
</tr>
<tr>
<td>Row4</td>
<td>87.5</td>
<td>95</td>
<td>1</td>
<td>100</td>
<td>91</td>
<td>100</td>
<td>76</td>
<td>1</td>
<td>92.5</td>
<td>89</td>
<td>1</td>
<td>83</td>
<td>88</td>
<td>75</td>
</tr>
<tr>
<td>Row5</td>
<td>75</td>
<td>100</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>100</td>
<td>1</td>
<td>93.75</td>
<td>83</td>
<td>1</td>
<td>75</td>
<td>86</td>
<td>80</td>
</tr>
<tr>
<td>Row6</td>
<td>95</td>
<td>87.5</td>
<td>1</td>
<td>91</td>
<td>1</td>
<td>89</td>
<td>75</td>
<td>1</td>
<td>95</td>
<td>90</td>
<td>1</td>
<td>91</td>
<td>88</td>
<td>78</td>
</tr>
</tbody>
</table>
</div>

</body>
</html>

0 个答案:

没有答案