我无法更改折线图的填充颜色

时间:2019-09-12 07:00:11

标签: vue.js chart.js

我尝试更改折线图的填充颜色...但是它没有改变。它只是为我提供了默认颜色

我尝试设置fillColor : "rgba(151,187,205,0.5)",

<script>
export default {
  data() {
    return {
      fill: true,
      fillColor : "rgba(151,187,205,0.5)",
      borderWidth: 1,
      pointBorderWidth:1,
      backgroundColor: "rgba(244, 144, 128, 0.8)",
      beginZero: true,
      borderColor: '#14233b',
      btn: [
        { label: 'Today', value: 'day' },
        { label: 'Week', value: 'week' },
        { label: 'Month', value: 'month' },
        { label: 'Year', value: 'year' }
      ],
      data: {
        day: [1, 3, 5, 3, 1, 4, 5, 7],
        week: [12, 14, 16, 0, 11, 13, 15],
        month: [12, 14, 0, 18],
        year: [12, 14, 16, 18, 11, 13, 5, 16, 7, 11, 13, 15]
      },

      dataLabel: 'Foo',
      labels: {
        day: [6, 9, 12, 15, 18, 21, 24],
        week: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
        month: ['week 1', 'week 2', 'week 3', 'week 4'],
        year: [
          'jan',
          'feb',
          'mar',
          'apr',
          'may',
          'june',
          'july',
          'aug',
          'sept',
          'oct',
          'nov',
          'dec'
        ]
      },
      radio: 'day',

    }
  }
}
</script>

这是我绑定它的地方


          <div class="card-img-bottom">
            <chartjs-line
              :backgroundColor="backgroundColor"
              :fill="fill"
              :fillColor="fillColor"
              :beginzero="beginZero"
              :bind="true"
              :bordercolor="borderColor"
              :data="data[radio]"
              :datalabel="dataLabel"
              :labels="labels[radio]"
              :borderWidth="borderWidth"
            />
          </div>

我希望在设置fillColor的值时填充颜色会改变

0 个答案:

没有答案