Файлы Excel с диаграммами и без.
Sunday, April 8th, 2007Excel таблицы создавать проще чем казалось бы. Нынешние MS Office средства позволяют создавать подобные таблицы с диаграммами используя симбиоз технологий HTML + XML+ VML
Итак. Для создания простой таблицы с данными создаём файл, который содержит:
<html> <body> <table> <tr> <td>1</td> </tr> <tr> <td>2</td> </tr> <tr> <td>3</td> </tr> <tr> <td>4</td> </tr> </table> </body> </html>
Сохраним файл под именем excelfile.xls, откроем его с помощью MS Excel и получим результат:
Как видно - результат ничем не отличается от варианта создания файла в самом MS Excel за исключением разграничения ячеек сероватым стандартным цветом. Для того, чтобы исправить этот “баг” (или фичу) вносим следующие правки:
<body style="border:.5pt solid silver;">
Для того, чтобы использовать формулы в таблицах - определяем xml namespace urn:schemas-microsoft-com:office:excel:
<html xmlns:x="urn:schemas-microsoft-com:office:excel">
Далее пример использования функции SUM (сумма) и простого сложения значений ячеек с использованием нового аттрибута x:fmla:
<html xmlns:x="urn:schemas-microsoft-com:office:excel"> <body style="border:.5pt solid silver;"> <table> <tr> <td>1</td> </tr> <tr> <td>2</td> </tr> <tr> <td>3</td> </tr> <tr> <td>4</td> </tr> <tr> <td style="width: 48pt" x:fmla="=SUM(A1:A4)"></td> </tr> <tr> <td x:fmla="=A1+A2"></td> </tr> </table> </body> </html>
Я добавил ещё определение ширины для ячейки, где выводится сумма style=”width: 48pt” (48pt - это стандартная ширина ячейки в excel):
Добавляем диаграмму:
Дописываем ещё один namespace:
<html xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns:v="urn:schemas-microsoft-com:vml">
И после определения таблицы дописываем кусок xml кода
<!--[if gte vml 1]> <v:shape style='position:absolute; width: 600px; height: 400px'> <x:ClientData ObjectType="Chart"> <x:WebChart> <x:Scaling> <x:ScaleID>0</x:ScaleID> <x:Orientation>MinMax</x:Orientation> </x:Scaling> <x:Scaling> <x:ScaleID>1</x:ScaleID> <x:Orientation>MinMax</x:Orientation> </x:Scaling> <x:Chart> <x:Title> <x:Caption> <x:DataSource>-1</x:DataSource> <x:Data>"<x:B>Name of diagram</x:B>" </x:Data> </x:Caption> <x:Border> <x:ColorIndex>None</x:ColorIndex> </x:Border> </x:Title> <x:PlotArea> <x:Interior> <x:ColorIndex>14</x:ColorIndex> </x:Interior> <x:Graph> <x:Type>Line</x:Type> <x:SubType>Standard</x:SubType> <x:ScaleID>0</x:ScaleID> <x:ScaleID>1</x:ScaleID> <x:Series> <x:Index>0</x:Index> <x:Caption> <x:DataSource>-1</x:DataSource> <x:Data>"Line 1"</x:Data> </x:Caption> <x:Category> <x:DataSource>0</x:DataSource> <x:Data>excelfile!$B$1:$B$6</x:Data> </x:Category> <x:Value> <x:DataSource>0</x:DataSource> <x:Data>excelfile!$A$1:$A$6</x:Data> </x:Value> </x:Series> </x:Graph> <x:Axis> <x:Placement>Bottom</x:Placement> <x:AxisID>0</x:AxisID> <x:ScaleID>0</x:ScaleID> <x:Title> <x:Caption> <x:DataSource>-1</x:DataSource> <x:Data>"<x:B>Axis X</x:B>" </x:Data> </x:Caption> <x:Border> <x:ColorIndex>None</x:ColorIndex> </x:Border> </x:Title> <x:Type>Category</x:Type> </x:Axis> <x:Axis> <x:Placement>Left</x:Placement> <x:AxisID>1</x:AxisID> <x:ScaleID>1</x:ScaleID> <x:MajorGridlines/> <x:Title> <x:Caption> <x:DataSource>-1</x:DataSource> <x:Data>"<x:B>Axis Y</x:B>" </x:Data> </x:Caption> <x:Border> <x:ColorIndex>None</x:ColorIndex> </x:Border> </x:Title> <x:Type>Value</x:Type> </x:Axis> </x:PlotArea> <x:Legend> <x:Placement>Right</x:Placement> </x:Legend> </x:Chart> </x:WebChart> </x:ClientData> </v:shape> <![endif]-->
Это минимальный набор инструкций, которых необходимо для корректного отображения диаграммы. При просмотре XML всё становится понятным из названий тегов. Что на мой взгляд может показаться непонятным:
- x:ClientData ObjectType=”Chart” - эта инструкция говорит о том, что это и есть именно диаграмма, а не другой какой-нибудь объект
- Scaling - тут указываются два блока определений Scaling, для горизонтальной и вертикальной оси, MaxMin можно заменить на MinMax, тогда данные будут “отсортированы” от минимального к максимальному
- x:DataSource - если DataSource равен 0, значит данные будут браться по указанной в x:Data ссылке из листа данных, если же равен -1, но данные записываются прямо в x:Data
- x:Type - тут указывается тип диаграммы. В нашем случае это Line. Может быть например Bar, Pie и др.
- Для добавления ещё одной линии данных нужно продублировать блок x:Series соответственно изменив блок с данными
Пример созданного файла: excelfile.zip
Представляю українську локалізацію відомого JavaScript’ового календаря 
