如何使用 div id 更改线条的颜色

Question

我已经按照 Chartist 的文档在我的页面上放置了不止一张图表：（取自 https://gionkunz.github.io/chartist-js/getting-started.html#as-simple-as-it-can-get ）

<div class="ct-chart ct-golden-section" id="chart1"></div>
<div class="ct-chart ct-golden-section" id="chart2"></div>

<script>
  // Initialize a Line chart in the container with the ID chart1
  new Chartist.Line('#chart1', {
    labels: [1, 2, 3, 4],
    series: [[100, 120, 180, 200]]
  });

  // Initialize a Line chart in the container with the ID chart2
  new Chartist.Bar('#chart2', {
    labels: [1, 2, 3, 4],
    series: [[5, 2, 8, 3]]
  });
</script>

这很好用，我可以通过在 HTML.

中定位 div id 轻松地从 js 添加不同的图表

但是，我无法更改每个图表的 line/background 颜色。

到目前为止我已经尝试过：

<style>#chart1{stroke: white}</style>

在我的 HTML 中，但它什么也没做。

我见过的所有示例都在 div class 上定义了 css，但我不确定如何将其应用于此示例

有人能帮忙吗？

Answer 1

使用此选择器覆盖给定系列的线条样式

#chart1 .ct-series-a .ct-line {
  /* Set the colour of this series line */
  stroke: red;
  /* Control the thikness of your lines */
  stroke-width: 5px;
  /* Create a dashed line with a pattern */
  stroke-dasharray: 10px 20px;
}

更多请访问here

如何使用 div id 更改线条的颜色

How to change the color of a line using the div id

html

chartist.js