小编use*_*014的帖子

ChartJS新行'\n'在X轴标签中或使用ChartJS V2在图表或工具提示周围显示更多信息

我正在使用chart.js(V2)来尝试构建一个条形图,其中包含更多可供用户使用的信息,而无需将鼠标悬停在任何地方或单击任何位置.我提供了两个我希望如何编辑图表的例子.

可以看出,我希望(在某处)放置标签之外的一些额外信息.我希望通过在标签上添加'\n',我可能能够获得与选项A类似的内容.

一些编辑的代码提供了打击:

var barChartData = {

        labels: playerNames,
        datasets: [{
            label: 'Actual Score/Hour',
            backgroundColor: "rgba(0, 128, 0,0.5)",
            data: playerScores
          }, {
            label: 'Expected Score/Hour',
            backgroundColor: "rgba(255,0,0,0.5)",
            data: playerExpected
        }]
    };
function open_win(linktosite) {
           window.open(linktosite)
      }
        canvas.onclick = function(evt){
            var activePoints = myBar.getElementsAtEvent(evt);
            console.log(activePoints);
            linktosite = 'https://www.mytestsite.com/' + activePoints[1]['_model']['label'];
            open_win(linktosite);
}; 
window.onload = function() {
        var ctx = document.getElementById("canvas").getContext("2d");
        window.myBar = new Chart(ctx, {
            type: 'bar',
            data: barChartData,
            options: {
                title:{
                    display:true,
                    text:"Player Expected and Actual Score per Hour" …

Run Code Online (Sandbox Code Playgroud)

javascript chart.js

use*_*014

2016 05-10

14
推荐指数

4
解决办法

2万
查看次数

将 Chart JS 条形图边框更改为虚线

我正在使用 Chart JS 构建实时仪表板。我很好奇是否有办法将条形图的边框更改为虚线或虚线？我已经浏览了http://www.chartjs.org/docs/上的文档，但我只能找到关于线图的虚线的提及，例如 borderDash()。这似乎不适用于条形图边框。

我想要条形图上的虚线边框，例如在此图像的左侧条形图中：在此处输入图像描述

生成上面的图（右侧）的虚拟代码：

<!doctype html>
<html>

<head>
<title>Combo Bar-Line Chart</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.2/Chart.bundle.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.2/Chart.bundle.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.2/Chart.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.2/Chart.min.js"></script>


<style>
canvas {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
</style>
</head>

<body>
<div style="width: 75%">
    <canvas id="canvas"></canvas>
</div>
<button id="randomizeData">Randomize Data</button>
<script>
    var randomScalingFactor = function() {
        return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
    };
    var randomColorFactor = function() {
        return Math.round(Math.random() * …

Run Code Online (Sandbox Code Playgroud)

javascript charts plot chart.js

use*_*014

lucky-day

0
推荐指数

1
解决办法

8478
查看次数