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添加不同的图表。

但是，我无法更改每个图表的线条/背景颜色。

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

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

在我的HTML中，但它没有做任何事情。

我见过的所有示例都在div类中定义了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

1 个答案: