Изменить заливку чартиста и цвет обводки в js - PullRequest
Новая
       9

Изменить заливку чартиста и цвет обводки в js

0 голосов
/ 06 марта 2020

Попытка динамически установить цвета на графике диаграммы, но не удается. Как мы можем установить пользовательские цвета через js? Попытка сделать ниже, но цвет для showArea на графике диаграммы не меняется. 

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title>Chartist</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" type="text/css" href="chartist.min.css">
      <style>
         .ct-series-a .ct-area, .ct-series-a .ct-slice-donut-solid, .ct-series-a .ct-slice-pie{
         fill: #4287f5;
         fill-opacity:0.5;
         stroke: #4287f5;
         }
      </style>
   </head>
   <body>
      <div class="ct-chart" id="chart"></div>
      <div class="ct-barchart"></div>
      <script type="text/javascript" src="chartist.min.js"></script>
      <script>
         var data = "[49,71,87,135,63]";

         var parsedData = JSON.parse(data);
         var chart = new Chartist.Line('.ct-chart', {
         labels: [1, 2, 3, 4],
         series: [
           parsedData
         ]
         }, {
         showPoint: false,
         showLine: false,
         showArea: true,
         fullWidth: true,
         showLabel: false,
         axisX: {
           showGrid: false,
           showLabel: false,
           offset: 0
         },
         axisY: {
           showGrid: false,
           showLabel: false,
           offset: 0
         },
         chartPadding: 0,
         low: 0
         });

         function functioncall(){
             var ta = document.getElementsByClassName('.ct-series .ct-series-a');
            ta[0].style.stroke = "#95f27e";
         }

         functioncall();

      </script>
   </body>
</html>

Была возможность изменить цвет только через тег стиля, но я хочу сделать это через js.

1 Ответ

0 голосов
/ 08 марта 2020

Метод style работает только со встроенными стилями. Поэтому, когда вы используете ta[0].style.stroke = атрибут стиля добавляется к элементу, а тег стиля игнорируется. Вы можете использовать css переменные с JS (https://davidwalsh.name/css-variables-javascript), но использовать встроенный стиль проще в вашем случае, я думаю.

...