12

我需要在我的bar图表上添加一条简单的点/垂直线，它具有动态 X 值，0 表示 Y 值。我需要的预览（红点）：

在此处输入图像描述

绿色值是动态的。

我当前状态的预览：

在此处输入图像描述

其中 3.30应该是点的 X 坐标 - [3.30, 0]。

我正在为图表使用Vue 图表，我尝试使用 and 创建一个混合图表bar，scatter但它scatter需要type: 'linear'它xAxis不适合我对bar图表的需求。

所以我尝试使用chartjs-plugin-annotation，它是box接受“坐标”的类型，但这里的问题是该X值必须是X轴（labels对象）上的固定值。如果我输入 X 轴 [3,0] 它将起作用，但如果有一个十进制数，例如 [3.5, 0]，它将不起作用。

  // data
  options: {
    responsive: true,
    maintainAspectRatio: false,
    legend: {
      display: false
    },
    scales: {
      yAxes: [{
        ticks: {
          min: 0,
          max: 1,
          stepSize: 0.1
        }
      }]
    }
  }

  // computed 
  labels: [1, 2, 3, 4, 5, 6], // fixed value, there are always 6 bars
  datasets: [
    {
      label: 'Values',
      backgroundColor: '#f89098',
      data: this.tableInputValues // array of decimal values
    }
  ]

所以，我的问题是如何在Chart.js条形图上放置一个“简单”点或垂直线，其中该点具有 X 轴的动态值 -> [动态值，0]。

仅供参考 - 这是关于预期价值

4

2 回答 2

8

据我了解 Vue Chart 使用画布工作（如演示页面所示）。
所以，我的建议是在你的 DOM 中检索代表图表的画布节点并动态写入所需的点。例如：

var c = document.getElementById("bar-chart");   //hereby assuming canvas named "bar-chart"
var ctx = c.getContext("2d");
ctx.fillStyle = "#ff0000";                     //red color for the dot
ctx.beginPath();
let yPosition = c.height - 5;                 //fixed y position
let xPosition = 35;                          //that's the dynamic expected value
ctx.arc(xPosition, yPosition, 2.5, 0, 2 * Math.PI);
ctx.fill();

在这里您可以找到一个演示，展示如何使用 Vue 实现这一目标。在这种情况下，您需要包装代码以在画布上以afterDraw钩子的形式绘制一个点。这个钩子需要作为插件附加到图表组件上，所以像这样：

...
mounted () { 
   //adding the plugin to draw the red dot
   this.addPlugin({
    id: 'chart-plugin',
    afterDraw: function (chart) {
       var c = chart.canvas;   
       var ctx = c.getContext("2d");
       ctx.fillStyle = "#ff0000";                     
       ctx.beginPath();
       let xPosition = 742; //x positioning to be calculated according to your needs
       let yPosition = c.height - 28;                                       
       ctx.arc(xPosition, yPosition, 3, 0, 2 * Math.PI);
       ctx.fill();
    }
  });

  //actual chart rendering
  this.renderChart({ 
    ...
  });
}
...

为了完整起见，您可以在此处找到 Chart.js 插件 API 的所有可用钩子的列表。

于 2018-12-10T10:32:33.480 回答
3

这是我对您的问题的解决方案https://jsfiddle.net/huynhsamha/e54djwxp/

这是结果的截图

在此处输入图像描述

在我的解决方案中，我type="line"同时使用 x 轴和 y 轴type="linear"。我还添加了属性options以<chart>供使用optionsChartJS

<div id="vue">
  <chart type="line" :data="data" :options="options"></chart>
</div>

将options设置 x 轴和 y 轴来渲染数据点和期望值：

      options: {
        scales: {
            xAxes: [{
            type: 'linear',
            ticks: {
                min: 1,
                max: 6,
                stepSize: 1
            }
          }],
           yAxes: [{
            type: 'linear',
            ticks: {
                min: 0,
                max: 1,
                stepSize: 0.1
            }
            }]
        }
      }

并且data将有 2 datasets。第一个是数据点，使用 type line，第二个是使用 type 的期望值bubble。

      data: {
        datasets: [{
            label: 'Frequency Data',
            data: dataPoints.map(({ val, freq }) => ({
                x: val,
              y: freq
            })),
            backgroundColor: 'rgba(72, 202, 59, 0.4)',
            borderColor: 'rgba(72, 202, 59, 1)'
        }, {
            label: 'Expected Value',
            type: 'bubble',
            data: [{ 
                x: expectedValue, 
              y: 0, 
              r: 8 // radius
            }],
            backgroundColor: 'rgba(255, 68, 0, 0.4)',
            borderColor: 'rgba(255, 68, 0, 1)'
        }]
        },

在datasets中，我们有dataPoints和expectedValue，它将从 API 中获取以获取您的数据点。我还模拟了数据点的简单 API：

// simulate the API to get data points
const retrieveData = () => [
    { val: 1, freq: 0.15 },
    { val: 2, freq: 0.25 },
    { val: 3, freq: 0.3 },
    { val: 4, freq: 0.2 },
    { val: 5, freq: 0.1 },
    { val: 6, freq: 0.45 }
]


// fetch your data here, return array of JSON { val, freg }
const dataPoints = retrieveData() || [];

// calculate expected value = sum( val * freq ) each i in dataPoints
const expectedValue = dataPoints.reduce((cur, { val, freq }) => cur + val * freq, 0).toFixed(4);

您可以运行片段或在小提琴上运行https://jsfiddle.net/huynhsamha/e54djwxp/92/

<script async src="//jsfiddle.net/huynhsamha/e54djwxp/92/embed/js,html,css,result/dark/"></script>

于 2018-12-15T12:57:42.187 回答