Блог

Главная - Вопросы по программированию - столбчатая диаграмма только для html с вертикальным расположением

столбчатая диаграмма только для html с вертикальным расположением

#html #css #charts #outlook

#HTML #css #Диаграммы #outlook

Вопрос:

Я пытаюсь создать столбчатую диаграмму с вертикальным расположением для использования в электронных письмах; клиент в первую очередь Outlook 2016.

Я не хочу использовать изображения, потому что в моем сценарии пользователю всегда будет предложено загрузить изображения, и он может не беспокоиться. Outlook не поддерживает jQuery, JavaScript или div s с позициями.

Вот действительно простой код, который я должен создать двумя одинаковыми столбцами (да, я знаю, что это ужасно):

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <body>
    <table>
      <tr>
        <td style="height:10px">
          <table style="border: none;border-collapse: collapse;">
            <tr>
              <td style="height:10px">
                <table style="border: none;
                    border-collapse: collapse;width:40px;
                    mso-table-lspace:0pt;
                    mso-table-rspace:0pt;">
                  <tr>
                    <td style="height:50px;background-color:red;">
                      <p>1</p>
                    </td>
                  </tr>
                </table>
                <table style="border: none;
                    border-collapse: collapse;width:40px;
                    mso-table-lspace:0pt; mso-table-rspace:0pt;">
                  <tr>
                    <td style="height:10px;background-color:green;">
                      <p>1</p>
                    </td>
                  </tr>
                </table>
              </td>
              <td style="height:10px">
                <p>
                  <table style="border: none;
                      border-collapse: collapse;width:40px;
                      mso-table-lspace:0pt; mso-table-rspace:0pt;">
                    <tr>
                      <td style="height:50px;background-color:red;">
                        <p>1</p>
                      </td>
                    </tr>
                  </table>
                </p>
                <p>
                  <table style="border: none;
                      border-collapse: collapse; width:40px;
                      mso-table-lspace:0pt; mso-table-rspace:0pt;">
                    <tr>
                      <td style="height:10px;background-color:green;">
                        <p>1</p>
                      </td>
                    </tr>
                  </table>
                </p>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </body>

Это работает нормально, и я расширил диаграммы, которые выглядят как эта визуализированная диаграмма:

визуализированная диаграмма

Однако, когда пользователь пересылает электронное письмо в Outlook, он добавляет <p> теги для меня и делает диаграмму нечитаемой, например:

нечитаемая диаграмма

Итак, я ищу либо способ обмануть Outlook, чтобы он не вставлял <p> теги, которые заставляют диаграмму иметь пробелы в столбцах, либо другой способ создания диаграммы в первую очередь, используя только HTML и CSS. Нет jQuery, нет JavaScript и нет div s с плавающей точкой.

Ответ №1:

Outlook в Windows с 2007 по 2019 год использует механизм рендеринга Word, и они добавляют много <p> других вещей. Насколько я знаю, это невозможно предотвратить. Однако, если вы добавите их сами в первую очередь с соответствующими стилями ( margin:0 для сброса стилей абзацев по умолчанию), все должно быть в порядке. Но в вашем примере вам даже не нужно добавлять абзацы в первую очередь. Вот полный рабочий пример, упрощенный из вашего кода (я тестировал это на реальном Outlook 2019, и код остается стабильным при ответе или пересылке):

 <!DOCTYPE html>
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stacked bar chart</title>
    <!--[if mso]>
    <xml>
        <o:OfficeDocumentSettings>
            <o:PixelsPerInch>96</o:PixelsPerInch>
        </o:OfficeDocumentSettings>
    </xml>
    <![endif]-->
</head>
<body>
    <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border: none; border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
        <tr>
            <td style="padding:2px; vertical-align:bottom;">
                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border: none; border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; width:40px;">
                    <tr>
                        <td style="height:50px; background-color:red;">1</td>
                    </tr>
                    <tr>
                        <td style="height:10px; background-color:green;">1</td>
                    </tr>
                </table>
            </td>
            <td style="padding:2px; vertical-align:bottom;">
                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border: none; border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; width:40px;">
                    <tr>
                        <td style="height:10px; background-color:red;">1</td>
                    </tr>
                    <tr>
                        <td style="height:50px; background-color:green;">1</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

Если это не работает для вас, другим подходом может быть использование VML для отображения всего графика. Но это будет работать только на клиентах Outlook, использующих механизм рендеринга Word или совместимых с VML.

Комментарии:

1. спасибо, это сработало! Является ли основным отличием атрибут role=»презентация»?

2. Нет. Существует role="presentation" в основном по соображениям доступности (чтобы программы чтения с экрана не могли читать вслух всю структуру таблиц). Самым большим отличием в моем примере кода является удаление <p> того, что у вас было, и использование большего количества стилей и атрибутов по умолчанию.