2017-02-05 36 views
1

Я пытаюсь использовать d3-узел, чтобы сделать диаграмму в стороне сервера и пытаюсь сделать новую диаграмму EJS с помощью следующего кода: <% = svgChart%> , когда я используйте браузер для его просмотра, он отображает только содержимое svg-тега, как показано ниже:почему rendeing SVG тег в файл EJs не признал

<svg xmlns="http://www.w3.org/2000/svg" width="960" height="400"><defs>      <style type="text/css"><![CDATA[ .axis{font: 10px sans-serif;} .axis path,.axis line{fill: none;stroke: #000;shape-rendering: crispEdges;} .x.axis path{display: none;} ]]></style></defs><g transform="translate(40,20)"><path d="M20,32.4L20.430000000000003,32.4L20.86,32.4L21.290000000000003,32.4L21.720000000000002,32.4L22.150000000000002,32.4L22.580000000000002,32.4L23.01,32.4L23.44,32.4L23.87,32.4L24.299999999999997,32.4L24.73,32.4L25.16,32.4L25.590000000000003,32.4L26.02,32.4L26.450000000000003,32.4L26.88,32.4L27.310000000000002,32.4L27.740000000000002,32.4L28.17,32.4L28.6,32.4L29.03,32.4L29.46,32.4L29.89,32.4L30.32,32.4L30.75,32.4L31.18,32.4L31.61,32.4L32.04,32.4L32.47,32.4L32.9,32.4L33.33,32.4L33.76,32.4L34.190000000000005,32.4L34.620000000000005,32.4L35.050000000000004,32.4L35.480000000000004,32.4L35.910000000000004,32.4L36.34,32.4L36.77,32.4L37.2,32.4L37.63,32.4L38.06,32.4L38.489999999999995,32.4L38.92,32.4L39.35,32.4L39.78,32.4L40.21,32.4L40.64,32.4L41............................... 

Не отображается сама диаграмма. svgChart содержит строку тега svg. Если я скопирую содержимое svgChart (строку) непосредственно в ejs, он отлично отобразит диаграмму.

кажется, что ejs не может отображать содержимое тега при загрузке страницы. Это означает, что svgChart является простой строкой.

Мой вопрос: Как заставить ejs распознать svgChart как тэг svg, чтобы он мог отображать таблицу svg в виде текста тега?

+0

@Robert, кажется, связано с Метод рендеринга ejs. Кажется, при рендеринге код между <% %> получил только сам код, не успев интерпретировать его как код SVG. Поскольку я могу скопировать один и тот же svg-код (тег) в один и тот же файл ejs напрямую, тогда клиент может получить диаграмму отлично, а не видеть код. То, что я пытаюсь сделать, - это динамически поместить этот svg-код (или svg-тег) в файл ejs, чтобы клиент имел разную диаграмму всякий раз, когда данные менялись. Какие-либо предложения? – Robin

ответ

1

Попробуйте использовать <%- svgChart %> вместо <%= svgChart %>. По EJS документации:

  • <% = выводит значение в шаблон (HTML экранированием)
  • <% - Выводит неэкранированный значение в шаблон
+0

Спасибо Lukkazs. Позвольте мне попробовать это и вернемся к вам позже. Я думал, что это не правильное направление, и попробовал другой способ для моего предыдущего приложения. – Robin