Question

我有一个工作图表折线图，我按照文档中的建议配置了插件。加载页面时我没有收到任何错误。根据插件，它只是没有反映在图表上。我添加了两个插件 - 它们没有显示任何错误，我的折线图显示完全正常。

但我认为这些插件没有效果 - 工具提示插件和pointlabel插件。

是的，他们被加载到HTML中，他们的css文件也被包含在内，否则就会出现插件不存在的错误。

var options = {
    low: 0,
    high: 100,
    showGridBackground: false,
    showArea: true,
    axisX: {
        showGrid: false
    },
    axisY: {
    },
    plugins: [
        Chartist.plugins.ctPointLabels({
            textAnchor: 'middle',
            labelInterpolationFnc: function(value) {console.log("i was called"); return '$' + value}
        }),
        Chartist.plugins.tooltip({
        })
    ]
};

var m = new Chartist.Line('#myChart', data, options);

Answer 1

这是使用您的代码的简单工作示例。需要注意的一点是，工具提示需要额外的CSS才能正确显示。

https://jsfiddle.net/rxdb576n/1/

var data = {
  labels: ["Mon", "Tue", "Wed"],
  series: [
    [10, 20, 75]
  ],
}

var options = {
  low: 0,
  high: 100,
  showGridBackground: false,
  showArea: true,
  axisX: {
    showGrid: false
  },
  axisY: {},
  plugins: [
    Chartist.plugins.ctPointLabels({
      textAnchor: 'middle',
      labelInterpolationFnc: function(value) {
        console.log("i was called");
        return '$' + value
      }
    }),
    Chartist.plugins.tooltip({

    })
  ]
};

var m = new Chartist.Line('#myChart', data, options);

.chartist-tooltip {
  opacity: 0;
  position: absolute;
  margin: 20px 0 0 10px;
  background: rgba(0, 0, 0, 0.8);
  color: #FFF;
  padding: 5px 10px;
  border-radius: 4px;
}

.chartist-tooltip.tooltip-show {
  opacity: 1;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.11.0/chartist.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.11.0/chartist.min.js"></script>
<script src="https://unpkg.com/chartist-plugin-tooltips@0.0.17"></script>
<script src="https://unpkg.com/chartist-plugin-pointlabels@0.0.6"></script>
<div id="myChart"></div>

没有任何图表插件正在运行

1 个答案: